Question

这是我的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>

问题在于设置第一列的宽度时：它不会低于16px。如果我放置更大的宽度（20,50），彩色列会变大，但是当我尝试将它们设置得更薄（例如7px）时，它不会产生任何影响。如何在不从现有模板中删除任何css类的情况下执行此操作。彩色列必须是第一个，它的高度必须是行的高度，我必须能够将它的宽度设置为我想要的任何值。

Answer 1

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

Example

Answer 2

bootstrap可能在min-width或th上设置了td。如果是这样，我会添加一个额外的样式块（在HTML中，如果你不能添加/编辑外部CSS），以允许第一列尽可能小：

<style type="text/css">
  .table td:first-child, .table th:first-child {
    min-width: 0;
    padding: 0;
  }
</style>

列宽不起作用

2 个答案: