Высокие парни, я хочу сделать 2-х гребенный стол или структуру с тремя колонками, которые не изменяются по ширине и высоте независимо от того, что я в нее вставлял. в момент создания таблицы. верхняя строка для 3 названий, а нижняя строка - для описания названий, но расположение не является аккуратным, так как текст продолжает изменять размер таблицы. следовательно, он не выглядит симметричным. Я попытался дать процент ширины и высоты, но структура все еще изменяется с текстом. Я хотел бы создать сплошную рамку. Вы можете мне помочь?
Вот примерная таблица с фиксированной структурой
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style type="text/css">
#gradient-style
{
width: 100%;
text-align: left;
border-collapse: collapse;
table-layout: fixed;
text-align: center;
border: 1px solid black;
}
#gradient-style th
{
padding: 6px;
width: auto;
}
#gradient-style td
{
text-align: center;
vertical-align: middle;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<table id="gradient-style" cellspacing="0">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table description goes here....</td>
</tr>
</tfoot>
</table>
</body>
</html>
Вы можете попробовать следующее:
<table>
<tr>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3
</div>
</td>
</tr>
<tr>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 1 Description 1 Description 1
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 2 Description 2 Description 2
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 3 Description 3 Description 3
</div>
</td>
</tr>
</table>
Но это может привести к тому, что ваши таблицы выглядят так, когда вы вставляете слишком много данных или слишком длинный текст:
EDIT: Согласно Marc Audet, и это выглядит неплохо:
Попробуй это:
table
{
table-layout: fixed;
width: 100%;
}
th, td
{
height: 100px; /*whatever you need */
break-word: word-wrap; /* prevent td to stretch to fit long words */
}
overflow: auto
илиoverflow: hidden
дляdiv
, это решит проблему.