Обертка с переполнением: автоматическая обрезка правой границы таблицы - PullRequest
Новая
       3

Обертка с переполнением: автоматическая обрезка правой границы таблицы

1 голос
/ 30 января 2020

Как использовать overflow: auto и в то же время не обрезать правую границу таблицы, когда область просмотра достаточна для размещения таблицы.

Я хочу остаться автоматическим, потому что, если есть более 5 столбцов, мне нужно будет прокрутить вправо. Вопрос в том, почему при достаточной ширине правая граница обрезается? 

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0px;
}

tr {
  height: 78px;
}

thead {
  color: #92a1a6;
}

thead th {
  width: 264px;
}

thead td {
  width: 128px;
}

tbody {
  border: 1px solid black;
}

tbody th {
  width: 264px;
}

tbody td {
  width: 128px;
}

tbody tr,
tbody th,
tbody td {
  border: 1px solid black;
}

.scroll-holder {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
<div class="scroll-holder">
  <table>
    <thead>
      <tr>
        <th>First</th>
        <td>1.25</td>
        <td>2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Title here</th>
        <td>1250</td>
        <td>1250</td>
      </tr>
    </tbody>
  </table>
</div>

1 Ответ

2 голосов
/ 30 января 2020

Это, кажется, из-за несоответствия между thead (у которого нет границы) и tbody (который имеет).

Попробуйте добавить эквивалентную прозрачную границу к thead: 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
table{
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0px;
}

tr{
  height: 78px;
}

thead{
  color: #92a1a6;
}
  
thead th{
  width: 264px;
}

thead td{
  width: 128px;
}

tbody{
  border: 1px solid black;
}
thead{
  border: 1px solid transparent; /* <--- */
}

tbody th{
  width: 264px;
}

tbody td{
  width: 128px;
}

tbody tr, tbody th, tbody td{
  border: 1px solid black;
}
    
.scroll-holder{
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
</style>

</head>
<body>

<div class="scroll-holder">
  <table>
    <thead>
      <tr>
        <th>First</th>
        <td>1.25</td>
        <td>2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Title here</th>
        <td>1250</td>
        <td>1250</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
...