Избавьтесь от пустого пространства благодаря свойству размера родительского элемента - PullRequest
0 голосов
/ 04 мая 2020

Я создаю таблицу и использую свойство box-sizing: border-box; для его родительского элемента body. Я получаю вертикальную красную линию справа в Chrome для некоторых разрешений экрана (попробуйте увеличить или уменьшить масштаб, чтобы увидеть это). Я хочу избавиться от этой красной линии.

Когда я удаляю свойство box-sizing: border-box; из body, оно работает нормально. Но это меняет внешний вид других элементов. Есть ли способ избавиться от этого.

ОБНОВЛЕНИЕ: Я хочу создать таблицу со следующими требованиями: 1. Адаптивный дизайн, т.е. горизонтальная прокрутка вместо переноса строки или переполнения. 2. Ширина 100%. 3. Box-shadow.

Вот мой код:

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  overflow-x: auto;
}

tbody {
  background-color: blue;
  display: table;
  width: 100%;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>

1 Ответ

1 голос
/ 10 мая 2020

Это интересный случай. Прежде всего, я бы сказал, что это извращение из-за семантически неправильного использования стилей: эти биты

table {
  display: block;
}
tbody {
  display: table;
}

не имеют смысла, зачем вам это использовать?

У меня есть немного подправил и создал MCVE:

table {
  display: block;
  background-color: red;
}

tbody {
  display: table;
  width: 100%;
  background-color: #ccffff;
}
<table>
  <tr>
    <td>test</td>
  </tr>
</table>

При увеличении и уменьшении Chrome можно увидеть вертикальную красную линию справа.

Как мы видим, Ширина элемента с display: table; width: 100%; не точно рассчитывается браузером, когда он находится внутри элемента с display: block. Чтобы проиллюстрировать, что это root проблемы, рассмотрим еще 2 фрагмента:

.table {
  background-color: red;
  display: block;
}

.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}
<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td">test</div>
    </div>
  </div>
</div>

это структура "таблицы" в том виде, как вы ее изменили. Ячейка на самом деле не играет никакой роли, это все еще воспроизводит проблему:

.table {
  background-color: red;
  display: block;
}
.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}
<div class="table">
  <div class="tbody">
    test
  </div>
</div>

Я думаю, что это можно считать ошибкой браузера, но поскольку эта структура семантически неверна, вы не можете назвать ее ошибкой, поскольку спецификации, вероятно, не Ничего не говорите об этом.

Просто удалите эти display правила и переместите width: 100% к столу, и вот вы go:

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow-x: auto;
  width: 100%;
}

tbody {
  background-color: blue;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...