I have the following HTML table:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="w-100"> <thead> <tr> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </tbody> </table>
This displays properly and stretches across the page (ie, container).
If I add d-none d-md-inline
to the <table>
tag, the table collapses. I've also tried d-md-inline-block
and d-md-block
but neither works.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="w-100 d-none d-md-inline"> <thead> <tr> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </tbody> </table>
THE POINT: I want a table to display when on a MD screen or larger, and I want the big table to disappear when on a SM or XS screen (ie, mobile). It functions correctly when moving the width of the window and when it hits the SM breakpoint, it disappears. The problem is that the table is collapsed onto itself and does not stretch (like justified) across the container width.
How do I get the table to display properly in MD and bigger but disappear on SM and XS?
FIND THE CODE AT JSFIDDLE
Add one wrapper
on a table
like & add this class d-none d-md-block
for wrapper
div
<div class="d-none d-md-block">
<table class="table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.