hey there just having another problem using bootsrap.
bootstrap is working. you can see it in the pics. but not quite right.
Bootstrap is working because of the red, green and yellow collumns (class= "danger"...).
In the loop editor i use the normal table class.
But in the front end the table does not look like an bootstrap table because of the boarders around the table.
To clarify things. I use the Astra theme. Is there a conflict in the css files?
Example View code
(loop editor)
<table class="table">
<thead>
<tr>
<th scope="col">test 1</th>
<th scope="col">test 2</th>
<th scope="col">test 3</th>
</tr>
</thead>
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-12">[wpv-post-body view_template="Loop item in view 3"]</div>
</div>
[wpv-item index=other]
<div class="col-sm-12">[wpv-post-body view_template="Loop item in view 3"]</div>
[wpv-item index=pad]
<div class="col-sm-12"></div>
[wpv-item index=pad-last]
<div class="col-sm-12"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
</table>
Example View code
(loop editor)
template
<tbody>
<tr>
<td class="danger">[wpv-post-title]</td>
<td class="success">[wpv-post-author]</td>
<td class="warning">[wpv-post-date]</td>
</tr>
</tbody>
Hello,
It seems to be a CSS problem, please elaborate the question with more details:
1) Please provide a live URL with the same problem, I need to test it in my Chrome browser
2) What kind of table border do you need?
hey there, great and thank you.
first of all i don´t need any borderstyle the table should just look like the regular bootstrap table (class="table") as seen in the pic of my last post or here the first example (versteckter Link the first example).
Can you make this post privat? So nobody but you can see the login informations?
The site is just a testing site:
***
check the page "Tabelle" in the menu there you find the table which is corresponding to the view "view 3".
As your request, I have removed the credentials in your post, and have done below modification in your website
1) Create another view "view 4" with same filter as your view "view 3",
versteckter Link
2) in section "Loop Editor", click the button "Schleifen-Assistent", use option "Tabelle" and generate the result, see screenshot:
Tabelle.JPG
3) Edit the shortcodes, add two CSS class names to the HTML table tag:
<table width="100%" class="table my-table">
4) Click "CSS-Editor", add below CSS codes to hide the table border:
table.my-table, table.my-table th, table.my-table td{
border:none !important;
}
5) Test it in front-end:
versteckter Link
There isn't any border style in the new table.
Please check if it is what you want.
Hey there,
thanks for your help.
I also found out the problem. Astra theme is given the boarder to bootstrap tables. Found it in the css files of astra.
I solved it be putting this to the child theme css:
table,td,th{border:0px;
}
very similar to your solution!
Thanks a lot!!!!!!
I´ll close this topic.
cheers
