Question

我这样宣布一张桌子：

<div class="row">
     <div class="module span12">
           <section class="module">
                <table class="table table-striped table-bordered table-condensed">

                echo "<tr><td style='color: white; background-color: black;'><strong>Overall inventory breakdown</strong></td>";
                echo "<td style='text-align: center; color: white; background-color: black;'><strong></strong></td>";
                echo "<td style='text-align: center; color: white; background-color: black;'><strong>Ist</strong></td>";
                echo "<td style='text-align: center; color: white; background-color: black;'><strong>Soll</strong></td></tr>";

                </table>    
          </section>
     </div>
</div>

现在，该表与整个页面一样宽。但我希望它更小。

我已尝试过几种CSS变体，例如每个width设置td值，但对我来说没有任何作用。有什么帮助吗？

Answer 1

这似乎是一个Bootstrap问题。

.table {
    /* width: 100%; */
    width: auto;
}

了解您的浏览器的文档检查工具。它使得发现像这样微不足道的东西的来源。

Answer 2

尝试在width上设置table而不是td，即

<table class="table" width="80%">

或者使用CSS推荐，默认情况下<table>具有 缩小版 功能，可能会在样式表中的某处覆盖，也许来自CSS框架。尝试重置它：

.table { width: 80%; }

最好是.the-parent-class .table { width: 80%; }，因此不会影响您网站上其他位置的表格样式。

Answer 3

＆＃13;

<div class="row">
        <div class="module span12">
            <section class="module">
                <table width="500" class="table table-striped table-bordered table-condensed">
                    echo "
                    <tr>
                        <td style='color: white; background-color: black;'><strong>Overall inventory breakdown</strong></td>"; echo "
                        <td style='text-align: center; color: white; background-color: black;'><strong></strong></td>"; echo "
                        <td style='text-align: center; color: white; background-color: black;'><strong>Ist</strong></td>"; echo "
                        <td style='text-align: center; color: white; background-color: black;'><strong>Soll</strong></td>
                    </tr>";
                </table>
            </section>
        </div>
    </div>

＆＃13;

将宽度作为属性添加到表

Answer 4

使用您当前的HTML代码，您的CSS中可能有width值，如下所示：

.row { width: 80%; }

如何更改HTML表的宽度？

4 个答案: