Расчет процентной доли ширины ячейки таблицы с закругленными углами для составных элементов - PullRequest
Новая
       73

Расчет процентной доли ширины ячейки таблицы с закругленными углами для составных элементов

0 голосов
/ 04 ноября 2019

Примечание. Эта проблема возникает только в браузерах Blink, таких как Chrome. Это не происходит в Firefox во время написания.

У меня есть таблица table-layout: fixed, содержащая некоторые элементы, которые охватывают несколько столбцов. Чтобы гарантировать, что они заполняют все столбцы, они используют calc(), чтобы определить их ширину как (colspan) кратное 100% плюс пространство, занимаемое их границами.

Например, элемент, охватывающийтри столбца будут calc(300% + 2px), то есть три ширины столбца и две границы толщиной 1 пиксель между ними.

В Chrome этот расчет приводит к тому, что элементы не заполняют столбцы с определенной шириной экрана. При изменении размера экрана, кажется, что округление заставляет элементы «прыгать», когда они достигают правильного значения.

Animation of jumping spanned item

Есть ли другая причиначем округлить, что это происходит, и могу ли я что-нибудь сделать, чтобы предотвратить это? Предположительно, замена всей таблицы на равные div-клетки будет работать, но я бы предпочел работать с тем, что у меня есть. 

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
td {
  position: relative;
  padding: 0;
  border: 1px solid black;
}
.spanner {
  width: calc(600% + 5px);
  background-color: rgba(254,0,11, 0.3);
}
<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td>
        <div class="spanner">Here's some div that is meant to span the first two table cells, but it doesn't quite do that</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 04 ноября 2019

вы должны использовать атрибут "colspan" 

<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td colspan="2">
        Here's some div that is meant to span the first two table cells
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

О ширине, если вы используете свойство css 

box-sizing : border-box

Границы должны быть включены в счетчик ширины

...