Ширина ячеек таблицы HTML

Question

Я пытаюсь реализовать следующий макет таблицы в HTML

Таблица шириной 100% имеет три столбца. Содержимое левого и правого столбцов перемещается влево и вправо соответственно. Левый и правый столбцы должны выделять минимальное жизнеспособное пространство по их самому широкому дочернему элементу, а средний столбец - оставшееся пространство. Как определить такую ​​таблицу с помощью HTML5 и CSS?

Answer 1

Существует учебник w3school , учебник о том, как сделать что-то очень похожее на то, что вы пытаетесь сделать, я адаптировал его и сделал из него кодовую ручку Codepen .

<div class="row">
  <div id="leftclm" class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div id="rightclm" class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>



    * {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 60%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}
#rightclm{
  width: 20%;
}
#leftclm{
  width: 20%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Answer 2

table {
    border-collapse: collapse;
}

table tr:nth-child(even) {
  background: #af3;
}

table th, 
table td {
    border: 1px solid gray;
    text-align: center;
    border-collapse: collapse;
}

table tr td:first-of-type,
table tr th:first-of-type,
table tr td:first-of-type,
table tr th:last-of-type  {
    width: 100px;
}

<table style="width: 100%">
					<tr>
						<th>Element</th>
						<th>Element</th>
						<th>Element</th>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
				</table>

Answer 3

Попробуйте это.

<div class="cont">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

.cont {
  display: flex;
  flex-direction: row;
  color: #fff;
}

.left {
  flex: none;
  background: #111;
}

.right {
  flex: none;
  background: #111;
}

.middle {
  flex: auto;
  background: #66ccff;
}