html - <th> 的列宽不起作用

标签 html css twitter-bootstrap

这是我的 html:

     <html>
<head>
<meta charset="utf-8">    

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">

</head>
<body style="padding-top: 47px;">

<table class="table table-hover table-striped-custom">
    <thead>
        <tr>
            <th style="width: 5px;"></th>
            <th>Column2</th>
            <th>column2</td>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td style="background-color: #FF5F5F;width: 5px;"></td>
                <td>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>bla</td>
            </tr>
            <tr>
                <td style="background-color: deepskyblue"></td>
                <td>bla</td>
                <td>bla</td>
            </tr>

    </tbody>
</table>

问题是在为第一列设置宽度时:它不会低于 16 像素。如果我放更大的宽度(20,50),彩色列会变大,但是当我尝试将它们设置得更薄时(例如 7px),它不会有任何效果。 我该怎么做,而不从现有模板中删除任何 css 类。彩色列必须在第一位,它的高度必须与行的高度一样,我必须能够将它的宽度设置为我想要的任何值。

最佳答案

这是因为您的 bootstrap css 正在向表格单元格添加 8px 填充(这就是为什么您的最小宽度为 16px:左 8px 加右 8px)- 尝试为这些单元格添加 padding:0; 和它应该工作

Example

关于html - <th> 的列宽不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25850787/

相关文章:

html - 如何使用 CSS 使 HTML 元素出现在垂直线上?

html - 使用 flex 在 bootstrap 4 中 float 2 个 div

HTML 如果不是 IE 8 或更低版本

jquery - 如何在灯箱 View Fancybox 中悬停图像时添加描述

css - 不使用相邻类会破坏样式吗?

javascript - 从 html 中剥离邮件正文,并使用 Javascript 保留格式

css - html5的视频标签后的空格

html - 响应式全宽 Bootstrap 轮播,左侧为小图像,右侧为标题

jquery - Bootstrap 下拉按钮菜单消失

css - Glyphicons Pro 图标在 Rails 4.2/Bootstrap 中无法正确显示