开发日志：浏览器宽度大于400px，td的宽度按百分比自适应，小于400px时，宽度为指定的值

最新推荐文章于 2021-12-07 11:12:43 发布

抓住梦想

最新推荐文章于 2021-12-07 11:12:43 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发日志

本文链接：https://blog.youkuaiyun.com/kaidishi/article/details/12199447

开发日志专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何创建一个响应式的表格布局，确保不同设备上各列宽度的比例为1:2:1，并且每列内容的最小宽度不小于指定值（125px, 150px, 125px）。通过使用HTML和CSS，实现跨设备的完美适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：列的宽度可随页面大小而变化，比例为1:2:1，但td最小不能小于指定值(125px;150px;125px;);

<table width="100%"  border="2px" height="50px;">
    <tr>
        <td width="30%" bgcolor="#FFCC99" align="center"><div style="width:125px;" >第一列显示内容</div></td>    
        <td width="60%" bgcolor="#33CC66" align="center"><div style="width:150px;">第二列显示内容</div></td>    
        <td width="30%" bgcolor="#0099FF" align="center"><div style="width:125px;">第三列显示内容</div></td>
    </tr>
</table>