如何解决使表格标题与图像大小相同
我使用表格在第一个单元格中添加图像，并在第二个单元格中添加标题。但是，我面临的问题是字幕宽度大于图像宽度（在宽屏幕中）。
我尝试在标签中使用 width="10%" 来解决这个问题，它工作了一段时间，但现在它使图像变小，成为 Bootstrap v3.3.4 中的响应式图像类。我还尝试在标题 style="position: absolute" 标签中添加 td，但没有奏效。 captionwidth 类设置为：width: 1px !important。我看到了 this answer，但我坚持使用静态 html 表来修复，所以我需要使以下 html 工作。
.captionwidth {
width: 1px !important
}<table border="0" align="left" cellspacing="4" cellpadding="4" class="table table-responsive" >
<tr>
<td>
<p align="center">
<a href="">
<font style="font-size: 14pt; ">
<img class="img-responsive" border="0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/640px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" alt="" width="640" height="425"></a></font></td>
</tr>
<tr>
<td class="captionwidth">
<p class="caption" align="center" dir="rtl"><span lang="en-us"><font size="4">Paracas National Reserve,Ica,Peru. View of the coast and sea from the top of the headland La Cattedrale. View of the coast and sea from the top of the headland La Cattedrale. </font></span></td>
</tr>
</table>解决方法
图像和字体大小将在下面的代码中响应，具体取决于可用的屏幕大小。
.small{
font-size:3vw;
text-align:center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.tablec{
border: 1px solid #dddddd;
align:left;
cellspacing:4 ;
cellpadding:4 ;
class:table table-responsive;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<table class="tablec" >
<tr>
<td>
<a href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/640px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" alt="Ocean" ></a></td>
</tr>
<tr>
<td>
<p class="caption" dir="rtl"><span><p class="small">Paracas National Reserve,Ica,Peru. View of the coast and sea from the top of the headland La Cattedrale.View of the coast and sea from the top of the headland La Cattedrale. </p></span></td>
</tr>
</table>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
