如何在Bootstrap中实现文字环绕表格？及表格列宽调整问题

嘿，我看你在复刻维基百科APJ Abdul Kalam页面时遇到了几个布局问题——文字没法在表格右侧环绕、表格会被段落内容撑开，还想调整表格列宽对吧？这几个问题其实都可以通过CSS的浮动和表格布局属性来解决，我给你详细讲讲：

1. 实现文字在表格右侧环绕 #

维基百科的侧边信息栏核心就是用**浮动（float）**让表格靠右，自然实现文字环绕效果。你可以给你的表格添加以下CSS：

.infobox {
  float: right;
  margin-left: 1.2em; /* 给表格和左侧文字留间距，提升可读性 */
  margin-bottom: 1em;
}

这样表格就会固定在页面右侧，下方的段落内容会自动环绕到表格左侧。如果后续有需要清除浮动的元素，给该元素加clear: both即可。

2. 防止表格被内容撑开 #

表格默认会根据内部内容自动扩展宽度，结合浮动后，我们可以通过table-layout: fixed强制表格按设定宽度布局，再搭配max-width限制最大宽度，避免被内容撑得过大：

.infobox {
  /* 保留上面的浮动样式 */
  max-width: 280px; /* 维基百科侧边栏常用宽度，可按需调整 */
  table-layout: fixed; /* 强制表格使用固定布局，忽略内容宽度 */
  width: 100%; /* 小屏幕下自适应父容器宽度 */
}

3. 自定义表格列宽 #

开启table-layout: fixed后，就可以直接给表格的表头或单元格设置宽度了。比如想让标签列（第一列）占30%，内容列占70%：

.infobox th {
  width: 30%;
}
.infobox td {
  width: 70%;
}

如果需要固定像素宽度，直接写像素值就行：

.infobox tr td:first-child {
  width: 110px;
}

额外：贴近维基百科的样式细节 #

如果你想更还原维基百科的infobox风格，可以补充这些样式：

.infobox {
  border: 1px solid #a2a9b1;
  background-color: #f8f9fa;
  border-collapse: collapse;
  font-size: 0.9em;
}
.infobox th, .infobox td {
  border: 1px solid #a2a9b1;
  padding: 0.3em 0.5em;
  text-align: left;
}
.infobox caption {
  font-weight: bold;
  font-size: 1.15em;
  margin-bottom: 0.3em;
}

把这些样式整合到你的代码里，就能完美实现你想要的维基百科风格布局啦！

内容的提问来源于stack exchange，提问作者Tarique