gpt4 book ai didi

html - 100% 宽度的表格溢出 div 容器

转载 作者:技术小花猫 更新时间:2023-10-29 11:27:04 26 4
gpt4 key购买 nike

<分区>

我遇到了一个 html 表的问题,该表溢出了它的父容器。

.page {
width: 280px;
border:solid 1px blue;
}

.my-table {
word-wrap: break-word;
}

.my-table td {
border:solid 1px #333;
}
<div class="page">
<table class="my-table">
<tr>
<th>Header Text</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Header Text</th>
</tr>
<tr>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
</tr>
</table>
</div>

如何强制标题文本和表格单元格文本以适合其容器的方式换行?我更喜欢纯 CSS 方法,但如果绝对必要,我也愿意使用 Javascript(或 jQuery)。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com