1

Hiding a single column on a mobile device using d-none d-md-block works fine, but if I have two adjacent columns I want to hide on mobile, they come out stacked on desktop.

 <table width="80%" class="tabTable table-bordered table-striped table-hover">
   <tr><th class="d-none d-md-block">Col 1</th><th class="d-none d-md-block">Col 2</th><th>Col 3</th></tr>
   <tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
   <tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
</table>

Comes out like

enter image description here

Adding style="vertical-align:top;" to the <th> and <td> in the first two columns does not seem to fix the issue.

Scott C Wilson
  • 19,102
  • 10
  • 61
  • 83
  • 1
    Is this a duplicate of this? https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – easleyfixed Dec 29 '21 at 21:28
  • Also, is it possible to use this type of division or do you require it in table format?
    Just in personal experience all the td and trs and what not can get overwhelming in your IDE and its just visually easier working on non tabled data that you CSS style to look like a table instead as a solution.     – easleyfixed Dec 29 '21 at 21:29
  • Unfortunately it's hard to restructure this - I was hoping there was a fix within the td and th like in the linked answer. – Scott C Wilson Dec 29 '21 at 21:44
  • 1
    Your hint was helpful @easleyfixed - see comment below accepted answer and thanks. – Scott C Wilson Dec 29 '21 at 21:55

1 Answers1

2

td has by default display:table-cell;. d-md-block changes its display to block. Block elements take all the available space.

Since one of the td has display:table-cell; and the other two have display:block, they look so.

Use d-md-table-cell instead of d-md-block every where.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table width="80%" class="tabTable table-bordered table-striped table-hover">
  <tr>
    <th class="d-none d-md-table-cell">Col 1</th>
    <th class="d-none d-md-table-cell">Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td class="d-none d-md-table-cell">Val 1</td>
    <td class="d-none d-md-table-cell">Val 2</td>
    <td>Val 3</td>
  </tr>
  <tr>
    <td class="d-none d-md-table-cell">Val 1</td>
    <td class="d-none d-md-table-cell">Val 2</td>
    <td>Val 3</td>
  </tr>
</table>
Scott C Wilson
  • 19,102
  • 10
  • 61
  • 83
mahan
  • 12,366
  • 5
  • 48
  • 83