-3

I have a table using display:block for thead and tbody. if the data in <td> increases, the <th> also needs to increase the width but now it won't works like that....Because of display:block ...How to fix this? any suggestions please!

Here I have tried css:

table thead,table tbody {
    display: block;
}

table tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 90px;
    max-height: 300px;
}

td, th {
    width: auto;
}
SPYder
  • 53
  • 10
  • will you please use fiddle or something else for code? – Vasim Shaikh Aug 17 '18 at 09:20
  • Welcome to SO. Can you provide a running example of your code via a snippet, so we can have a better look into it? You can do this by editing your post and use the `< >`-icon in the toolbar to create a snippet. –  Aug 17 '18 at 09:21
  • Sorry ,I don't know bro please give me a link or solution for this, with adjustable width for both td and th? If td width increase, width also needs to increase it.Because of display:block it won't working. – SPYder Aug 17 '18 at 09:27
  • @SPYder you are not making any effort. Sorry, but this attitude won't make others want to help you out. – mbuechmann Aug 17 '18 at 09:30
  • @mbuechmann One second please I will give a link – SPYder Aug 17 '18 at 09:30
  • [https://stackoverflow.com/a/51325906/9315094] Check out this. – Sakkeer A Aug 17 '18 at 09:32
  • See this fiddle - http://jsfiddle.net/vqkht1jz/ . In this, If data(width) of `` is increasing, it is increasing the width of `` too. Not sure what do you want to ask. Please share your complete code. – mmk Aug 17 '18 at 09:37
  • I think what you really want is: a table with a body that has a maximum height and scrolls vertically and maximizes horizontally. Is that correct? – mbuechmann Aug 17 '18 at 09:40
  • Yes @mbuechmann – SPYder Aug 17 '18 at 09:50
  • Please take a look here: https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll – mbuechmann Aug 17 '18 at 10:01

2 Answers2

0

If the text is non wrapping text then you set the cell to width:1px and use white-space:nowrap. The text in that column will then determine the width of the cell.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

td{width:1px;white-space:nowrap;}
table tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 90px;
    max-height: 300px;
}
</style>

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th>Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data Data D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is long</td>
      <td>Data D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
</body>
</html>
Vasim Shaikh
  • 4,485
  • 2
  • 23
  • 52
0

Try this: https://codepen.io/anon/pen/WKVGOw

<table>
  <thead>
  <tr>
    <th>Firstnamee</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  </thead>
   <tobody>
  <tr>
    <td>Jon</td>
    <td>Doe</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Watson</td> 
    <td>34</td>
  </tr>
   </tobody>
</table>


table thead,table tbody {
    display: table-header-group;
}

table tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 90px;
    max-height: 300px;
}

td, th {
  max-width: auto;
  text-align: left
}
Othmane
  • 281
  • 1
  • 7
  • display: table-header-group; I have used this already.Not working in chrome as fixed header on scroll... – SPYder Aug 17 '18 at 10:04