logo标签列表

HTML表格 - 使用CSS为表格添加边框

htmlcss
4
我正在使用html表格和css，我试图为表格添加边框，我已经添加了边框，但是它显示的边框宽度为100％，因为我使用了display:block;
如果我将display:block替换为display:inline-block，则会显示水平滚动条。是否可以在不使用overflow-x:hidden的情况下删除水平滚动条
当我们添加更多的td，th时，水平滚动条应该出现在静态div而不是窗口/屏幕下面。
注意：无法在html中添加任何内容。我只能重写css。所以请尽可能在css中进行更改。
我在jsfiddle中添加了我的代码：点击这里 对于大家来说这很简单，但我在这里有些困难。 

.static table {
    border-collapse: collapse;
    display: block;
    margin-bottom: 23px;
    overflow-x: auto;
    width: auto;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

我希望表格的边框宽度可以根据td进行调整，并且应该处于块级元素中。 点击这里

注意：我有更多的tr和td，但我只添加了示例。

你想要这个方式 https://jsfiddle.net/wgggngtx/ - Lalji Tadhani
请检查附加的图片，我期望得到类似那样的输出。 - RSKMR
请查看以下链接 https://jsfiddle.net/wgggngtx/1/ - Lalji Tadhani
请查看我的描述。如果我们这样添加，意味着水平滚动条会显示出来。如果我们添加overflow-x: hidden，则会起作用。但我不想使用隐藏类。 - RSKMR
在哪里显示滚动条，在相同的代码中添加显示滚动条的代码。 - Lalji Tadhani
5个回答
2

将 CSS 与 HTML 分离。将 table 样式进行重写。

.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}


.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}

.static table tr {
  background-color: #E0E0E0;
}

.static table tr:nth-child(even) {
  background-color: #F1F1F1;
}

.static table tr:first-child td,
.static table tr:first-child th {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  padding: 10px 16px;
}

.static td {
  min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

@RSKMR，将CSS与HTML分离。重写表格样式如下：.static table { border-spacing: 0px; border-collapse: separate; border: 1px solid black; } - Geethu Jose
是的，你说得没错，但在我的情况下，我正在处理现有的东西。我只能覆盖CSS。没有编辑内容HTML / CSS的选项。 - RSKMR
抱歉，我忘记了一个要点，如果我们添加更多的td，那么滚动条应该出现在静态div中而不是窗口/屏幕中。我已经更新了我的问题。 - RSKMR
1

只需从表格中删除display: block - 这是一种矛盾：表格具有display: table。

此外，您的行中并不包含所有行中相同数量的单元格，这是无效的HTML。可以添加空单元格或像我的代码片段中使用colspans。

.static table {
    border-collapse: collapse;
    margin-bottom: 23px;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;" colspan="3"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;" colspan="2"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;" colspan="2">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;" colspan="2">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;" colspan="2">-</td>
            </tr>
        </tbody>
    </table>
</div>

1

不要给表格设置边框，你可以将边框应用于tbody元素，它会自动适应而无需进行进一步更改。

<div class="static">
    <table>
        <tbody style="border: 1px solid black;">
            <tr>
                <td style="border: 1px solid black;"><strong>Account 
                Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>
如果我们这样添加，意味着边框不会显示。 - RSKMR
0

快速修复：将表格的display属性从block改为inline-block，并移除overflow-x属性。

       .static table{
        border-collapse: collapse;
        display: inline-block;
        margin-bottom: 23px;
        width: auto;
        }

更新的 JSFiddle http://jsfiddle.net/8ohv1o79/

水平滚动条仍然显示。请参考我的附件图片。我期望像这样。 - RSKMR
如果我们移除了overflow-x属性，意味着当内容（更多的td）超出窗口时，我期望水平滚动条应该出现在静态div中。 - RSKMR
好的，问题是由于边框引起的，我已经更新了 jsfiddle http://jsfiddle.net/8ohv1o79/，我认为这可能会有用。 - subramanian
可以不添加填充（双边框）吗？ - RSKMR
0

边框：1像素实线黑色；

.static table {
  border: 1px solid black;
}
1
请详细说明。 - Jonas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接