#html #css #html-table
#HTML #css #html-таблица
Вопрос:
Я создал HTML-страницу для отображения панели мониторинга состояния для некоторых работающих систем. Системы в первых семи строках как бы взаимосвязаны, поэтому в дополнение к статусу для каждой из них я хочу представить статус для комбинации семи систем. Технически это отлично работает, но я не совсем доволен макетом. Я хотел бы, чтобы желтая полоса слева занимала меньшую часть первого столбца, а не половину его.
Первые три строки таблицы кодируются как:
<tr><th id="namehead"></th><th colspan="2" class="typehead">Data</th>
<th class="typehead">Strøm</th><th class="typehead">Komm.</th></tr>
<tr id="sys1"><td id="agg_data" class="data agg" rowspan="7" td><td id="sys1_data"
class="data sys1"></td><td id="sys1_power" class="power sys1"></td><td id="sys1_comm"
class="comm sys1"></td></tr>
<tr id="sys2"><td id="sys2_data" class="data"></td><td id="sys2_power" class="power"></td>
<td id="sys2_comm" class="comm"></td></tr>
Затем из 8-й строки состояния я делаю:
<tr id="arc"><td id="arc_data" class="data" colspan="2"></td>
<td id="arc_power" class="power"></td><td id="arc_comm" class="comm"></td></tr>
в моем css класс «typehead» установил {width: 100px;} . Я попытался установить ширину для ячеек первой строки состояния, хотя это не дает мне никаких ошибок, это тоже не работает (firefox и chrome) Возможно ли как-то добиться этого в css?
Комментарии:
1. Можете ли вы опубликовать свой полный html / css в stackblitz?
Ответ №1:
Скорее всего, содержимое растягивает ячейку таблицы. Вы можете избежать этого, если обернете содержимое в div и измените его размер по мере необходимости. И, как вариант, расположите текст по вертикали.
.typehead {
width: 100px;
font: bold 20px/1 sans-serif;
color: #e3e3e3;
background-color: #262626;
}
td {
padding: 4px;
text-align: right;
background-color: #31a72c;
}
tr:nth-child(2) td:nth-child(1) {
width: 1em;
background-color: #ffee52;
}
.vertical {
writing-mode: vertical-rl;
transform: rotate(.5turn);
} <table>
<tr>
<!--th id="namehead"></th-->
<th colspan="2" class="typehead">Data</th>
<th class="typehead">Strøm</th>
<th class="typehead">Komm.</th>
</tr>
<tr id="sys1">
<td id="agg_data" class="data agg" rowspan="7">
<div class='vertical'>agg_data</div>
</td>
<td id="sys1_data" class="data sys1">sys1_data</td>
<td id="sys1_power" class="power sys1">sys1_power</td>
<td id="sys1_comm" class="comm sys1">sys1_comm</td>
</tr>
<tr id="sys2">
<td id="sys2_data" class="data">sys2_data</td>
<td id="sys2_power" class="power">sys2_power</td>
<td id="sys2_comm" class="comm">sys2_comm</td>
</tr>
<tr id="sys3">
<td id="sys3_data" class="data">sys3_data</td>
<td id="sys3_power" class="power">sys3_power</td>
<td id="sys3_comm" class="comm">sys3_comm</td>
</tr>
<tr id="sys4">
<td id="sys4_data" class="data">sys4_data</td>
<td id="sys4_power" class="power">sys4_power</td>
<td id="sys4_comm" class="comm">sys4_comm</td>
</tr>
<tr id="sys5">
<td id="sys5_data" class="data">sys5_data</td>
<td id="sys5_power" class="power">sys5_power</td>
<td id="sys5_comm" class="comm">sys5_comm</td>
</tr>
<tr id="sys6">
<td id="sys6_data" class="data">sys6_data</td>
<td id="sys6_power" class="power">sys6_power</td>
<td id="sys6_comm" class="comm">sys6_comm</td>
</tr>
<tr id="sys7">
<td id="sys7_data" class="data">sys7_data</td>
<td id="sys7_power" class="power">sys7_power</td>
<td id="sys7_comm" class="comm">sys7_comm</td>
</tr>
<tr id="arc">
<td id="arc_data" class="data" colspan="2">arc_data</td>
<td id="arc_power" class="power">arc_power</td>
<td id="arc_comm" class="comm">arc_comm</td>
</tr>
<tr id="arc">
<td id="arc_data" class="data" colspan="2">arc_data</td>
<td id="arc_power" class="power">arc_power</td>
<td id="arc_comm" class="comm">arc_comm</td>
</tr>
<tr id="arc">
<td id="arc_data" class="data" colspan="2">arc_data</td>
<td id="arc_power" class="power">arc_power</td>
<td id="arc_comm" class="comm">arc_comm</td>
</tr>
<tr id="arc">
<td id="arc_data" class="data" colspan="2">arc_data</td>
<td id="arc_power" class="power">arc_power</td>
<td id="arc_comm" class="comm">arc_comm</td>
</tr>
<tr id="arc">
<td id="arc_data" class="data" colspan="2">arc_data</td>
<td id="arc_power" class="power">arc_power</td>
<td id="arc_comm" class="comm">arc_comm</td>
</tr>
</table>