Как разделить ячейку таблицы внутри ячейки?

Question

Как разделить ячейку таблицы внутри ячейки?

0

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

Как бы я разделил эти ячейки? Они не находятся рядом с заголовком и должны быть вдвое меньше размеров самих ячеек.

user3441442 20 март 2014, в 12:09

Источник

Теги:

html

css

css3

2 ответа

Ещё вопросы

Johannes · Answer 1 · 2017-02-06T22-59-00.000Z

Что вы подразумеваете под "черным, оказывается, слишком сильным"?

Вы можете использовать линейные градиенты и создавать точные границы, как в следующих двух классах .x и .y, дважды .y каждый цвет и делая "границу" между ними с 50%/51% градиента:

table {
  width: 50%;
  height: 50px;
}
td {
  border: 1px solid #ddd;
}
.x {
  background: linear-gradient(to right, #fa0, #fa0 50%, #0fa 51%, #0fa 100%);
}
.y {
  background: linear-gradient(to right, #dc3, #dc3 50%, #c3f 51%, #c3f 100%);
}

<table>
  <tr>
    <td class="x"></td>
    <td class="y"></td>
    <td class="x"></td>
    <td class="y"></td>
  </tr>
  <tr>
    <td class="y"></td>
    <td class="x"></td>
    <td class="y"></td>
    <td class="x"></td>
  </tr>
</table>

Josh Nester · Answer 2 · 2014-03-20T07-48-00.000Z

Если вы просто разделите его на 2, вы можете использовать 2 <div> с float:left; и float:right;

<td>
    <div style="background-color:red; float:left; height:50px; width:50px;"></div><div style="background-color:blue; float:right; height:50px; width:50px;"></div>
</td>

Если вам нужно добавить больше цветовых вариаций, просто добавьте еще <div> с соответствующим обозначением float, основанным на том, с какой стороны вы его добавляете. Я думаю, что это будет работать в большинстве случаев.