tr tbody scroll with 100% width

Question

I looked for another question but couldn't find it

table>tbody {
  display: block;
  max-height: 50px;
  overflow: auto;
}

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
  </tbody>
</table>

add scroll to tbody,

I want to make the width 100% by removing the space between td and scroll.

Is it possible to do without fixing the width of td?

Please check this link, https://stackoverflow.com/questions/1457563/equal-sized-table-cells-to-fill-the-entire-width-of-the-containing-table . you can use table-layout: fixed; and equal width to cells. — Pratiksha Kale, Mar 16 '20 at 08:42

score 0 · Answer 1 · answered Mar 16 '20 at 09:21

0

If I got your question correctly , you may be able to get a full width by the style below :

table { 
width: 100%; 
border-spacing: 0; 
}

table tbody, table thead { 
 display: block; 
}  

thead tr th { 
height: 40px;  
line-height: 40px; 
} 

table tbody { 
height: 50px;  
overflow-y: auto; 
overflow-x: hidden;  
} 

tbody td, thead th { 
width : 200px; 
} 
td { 
text-align:center; 
}

answered Mar 16 '20 at 09:21

Fahad Osaimi

11
1

I can't fixed the width Because the width changes – user13031767 Mar 16 '20 at 10:04

score 0 · Answer 2 · answered Mar 16 '20 at 09:39

0

Try this one, First, Remove this whole part

 table>tbody {
      display: block;
      max-height: 50px;
      overflow: auto;
    }

second, surround a table tag with a div tag Ex : <div><table>......</table></div>. make that div tag scroll like this,

div {
  max-height: 50px;
  overflow: auto;
}

answered Mar 16 '20 at 09:39

Hiran

7
2

Sorry, I just want to use tbody, not div. – user13031767 Mar 16 '20 at 10:11

score 0 · Answer 3 · answered Mar 16 '20 at 09:52

Apply below css to tr will help you to fix the width issue without providing specific width to td.

table>tbody {
  display: block;
  max-height: 50px;
  overflow: auto;
}

table {
  width: auto;
  display: inherit;
}

tr {
  display: inline-table;
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
  </tbody>
</table>

Thanks, I'll test it now – user13031767 Mar 16 '20 at 10:13 — user13031767, Mar 16 '20 at 10:13
jsfiddle ran, but on my web it was pushed to the right. – user13031767 Mar 16 '20 at 11:31 — user13031767, Mar 16 '20 at 11:31

tr tbody scroll with 100% width

3 Answers3