首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >html :设置列宽

html :设置列宽
EN

Stack Overflow用户
提问于 2015-05-28 15:30:25
回答 1查看 34关注 0票数 1

我想为我的每个列设置一个自定义。但是出于未知的原因,如果我增加了co3的大小,那么co2的大小就会减小。有人知道为什么会有这种行为吗?

代码语言:javascript
运行
复制
<table class="table" style="table-layout: fixed;width:1165px">
    <thead>
        <th style="width:137px">Col 1</th>
        <th style="width:137px">Col 2</th>
        <th style="width:98px">Col 3</th>
        <th style="width:98px">Col 4</th>
        <th style="width:98px">Col 5</th>
        <th style="width:72px">Col 6</th>
        <th style="width:104px">Col 7</th>
        <th style="width:101px">Col 8</th>
        <th style="width:80px">Col 9</th>
        <th style="width:60px">Col 10</th>
    </thead>
</table>

谢谢。

EN

回答 1

Stack Overflow用户

发布于 2015-05-28 15:36:48

代码中所有列的宽度加起来是985px (而不是1165px)。

使用百分比而不是使用像素的固定宽度会更有好处。除了其他优点外,它还可以根据不同的屏幕尺寸调整大小。

例如..。

代码语言:javascript
运行
复制
<table class="table">
    <thead>
        <th style="width: 12%">Col 1</th>
        <th style="width: 12%">Col 2</th>
        <th style="width: 11%">Col 3</th>
        <th style="width: 11%">Col 4</th>
        <th style="width: 11%">Col 5</th>
        <th style="width: 10%">Col 6</th>
        <th style="width: 11%">Col 7</th>
        <th style="width: 10%">Col 8</th>
        <th style="width: 6%">Col 9</th>
        <th style="width: 6%">Col 10</th>
    </thead>
</table>

如果您希望表格本身具有固定的宽度,那么您可以简单地将宽度样式添加到整个表格:<table class="table" style="width: 1028px"> (当然,更改为您正在寻找的宽度)。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30499959

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档