Охватить только текст в таблице HTML
Возможно ли охватывать только текст в таблице HTML? Мне нужно, чтобы текст занимал три столбца, но я должен сохранять цвет фона ячеек разным: например, первая ячейка красная, вторая ячейка зеленая, третья ячейка красная.
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan = "3" bgcolor = "red">abcdefgh</td>
<td bgcolor = "green"></td>
<td bgcolor = "red"></td>
</tr>
</table>Невозможно использовать colspan и еще 2 td. Вы можете создать 3 «поддельные ячейки», используя другой элемент внутри td с помощью colspan.
Непонятно, о чем вы просите. Вы хотите сказать, что хотите, чтобы текст («abcdefgh») охватывал все три ячейки (красную, зеленую, красную)? То есть текст каким-то образом вырывается из ячейки?
Я добавил изображение результата, который я хочу
Таблицы работают не так, поэтому в colspan нет ничего, что могло бы заставить эту работу работать. Вы можете добавить текст в другой элемент и абсолютно позиционировать его. Или, может быть, переосмыслите свой код, чтобы не использовать таблицы.
Ответы 1
Вы можете создать линейный градиент для фона первой/составной ячейки, который использует резкие изменения между разными цветами (и удаляет лишние пустые ячейки):
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid grey;
}
.x {
background: linear-gradient(270deg, #FF0101 0% 33.33%, #5BA25F 33.34% 66.66%, #FF0101 66.67% 100%);
}<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan = "3" class = "x">abcdefghoiuasdfijawerhkgkjbyxc</td>
</tr>
</table>Чище, чем решение, о котором я думал.
Это именно то, что я хотел. Спасибо
Возможно, вы захотите добавить изображение, чтобы показать желаемый результат, потому что объяснение мне кажется неясным. Подумайте о том, чтобы взглянуть на «Как задать », а затем, возможно, отредактировать свой вопрос?