CODEWITHSUNDEEP
htmlcsshtml-table
Arnaud Rochez
Arnaud Rochez

Reputation: 668

Table getting reduced after adding Display: block

I had a table that took the entire surrounding div. In order to make it responsive, I wanted to add a horizontal scroll bar. I added the attributes

display: block; 
overflow-x: auto;

to the table, but it reduced the size of the table. I figured out that it was the display: block; attribute that did that. I tried adding width:100% but it didn't work. Would someone have an idea on how to fix this?

An image of before adding the display block attribute: https://ibb.co/kLCETv

and after: https://ibb.co/dptXFa

Thanks for your time !

Upvotes: 0

Views: 43

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Wrap you table into div, changing table into block will obviously change its behavior

div {
  overflow: auto;
}
<div>
  <table border=1 cellspacing=0 cellpadding=6>
    <tr>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
  </table>
</div>

Upvotes: 1

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

please wrap the table with a div and give the styles to that div instead of table.

<div class="table-wrapper">
  <table></table>
</div>

Upvotes: 2

Related Questions