html - 试图将表格放在 Bootstrap 行中，但表格的宽度跳过了该行

Question

我正在尝试将表格放置在 Bootstrap 行中，但表格的宽度一直在跨越表格的宽度。我已将表格宽度的最大值增加 50%，但问题仍然存在。

这是表格的CSS样式

**已编辑*****

<div class="col-sm-10" style="min-height:280px">

            <div class="panel panel-default">
            <div class="panel-body"> 
    <style type="text/css">
            table {
                    max-width: 50%;
                    background-color: transparent;
                    border-collapse: collapse;
                    border-spacing: 0;

                    }
                    .table thead th {
                    vertical-align: bottom;
                    }
                    .table th {
                    font-weight: bold;
                    }
                    .table th, .table td {
                    padding: 8px;
                    line-height: 20px;
                    text-align: left;
                    vertical-align: top;

                    }
                    .table td {
                      border-top: 1px solid #dddddd; 
                    }
                    table {
                    border-collapse: collapse;
                    border-spacing: 0;
                    }
                    .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
                    background-color: #f9f9f9;
                    }
                    .table-bordered {
                    border: 1px solid #dddddd;
                    border-collapse: separate;
                    border-left: 0;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    border-radius: 4px;
                    }
                    .table-bordered th, .table-bordered td {
                    border-left: 1px solid #dddddd;
                    }
            </style>

then in my view i have html implementation of the css code in the jsp page

    <c:when test="${messageList != null}">
                 <c:forEach items="${messageList}" var="mesList">

                  <div class="row"> 


       <table class="table table-striped table-bordered">
          <thead>
            <tr> 
              <th>Name</th>
              <th>Message</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Mark</td>
              <td>${mesList.message}</td>
              <td>${mesList.timestamp}</td>
            </tr>
          </tbody>
        </table>
                 </div>                     


                </c:forEach>
                </c:when>

</div></div></div>

请问如何将表格放入 div 行。

Answer 1

.table 类正在覆盖应用于 table 标签的样式。将您的样式应用到类 .table 而不是将它们应用到标签 table。

在处理样式表时，您始终必须记住它们是级联的。类的样式将覆盖应用该类的标签的样式。

当您的 css 没有效果时，查看浏览器的开发人员工具是值得的。在 Chrome 中，被覆盖的样式将被标记出来。