Тр Tbody свиток с шириной 100%

Question

Я искал другой вопрос, но не смог его найти

https://jsfiddle.net/0u15em89/

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>

добавить прокрутку к телу,

Я хочу сделать ширину 100%, убрав пробел между td и прокруткой.

Можно ли обойтись без фиксации ширины тд?

Answer 1

Попробуйте это, во-первых, удалите всю эту часть

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

секунду, окружите табличный тег тегом div Пример: <div><table>......</table></div>. сделать этот div тег прокрутки вот так,

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

Answer 2

Применить ниже css к tr поможет вам решить проблему width, не задавая c width для 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>

Answer 3

Если я правильно понял ваш вопрос, вы можете получить полную ширину, используя следующий стиль:

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; 
}