为什么我的表格列没有左对齐？

Question

我正在使用bootstrap，我正试图获得我的＆＃34;标题＆＃34;表中的列左对齐，但它不起作用。任何人都可以建议我在这里失踪的东西吗？

＆＃13;

＆＃13;

table td {
  text-align: left;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Date </th>
        <th>Time (IST)</th>
        <th>Title</th>
        <th>Speaker</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dec 17</td>
        <td>13:00 pm to 14:00 pm</td>
        <td>intro</td>
        <td>me</td>
      </tr>
      <tr>
        <td>Dec 17</td>
        <td>14:00 pm to 16:00 pm</td>
        <td>main topic</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

最终，我可能需要一些列和一些右对齐。 以下是示例网址：http://www.msbiria.org/ultrafest/schedule.php

Answer 1

没有干净而通用的方法来实现这一目标。你有两个独立的表，没有理由为什么其中一个表中的列宽应该与另一个中的列宽有任何关系。

在这种特殊情况下，假设您知道将进入表格的内容的性质（即首先是一个日期，不需要太多空间，那么时间，那么标题需要更多空间，那么发言者）我建议你自己设置列宽。

1. 将类schedule-table添加到受影响的表中。
2. 在每个表格中添加colgroup：

<table class="table schedule-table">
    <colgroup>
        <col></col>
        <col></col>
        <col></col>
        <col></col>
    </colgroup>
    <thead>
    ...

1. 通过CSS设置（相对）列宽：

.schedule-table colgroup col:nth-of-type(1){
    width: 10%;
}
.schedule-table colgroup col:nth-of-type(2){
    width: 30%;
}
.schedule-table colgroup col:nth-of-type(3){
    width: 40%;
}
.schedule-table colgroup col:nth-of-type(4){
    width: 20%;
}

1. 设置单元格的CSS，以便文本在不适合单元格时环绕。

.schedule-table td {
    white-space:normal !important;
}

这是 the fiddle

Answer 2

bootstrap中的表类是100％宽度。  .table {width：100％}

尝试 .table {width：auto}

Answer 3

如果您不知道数据的宽度，这是一个选项。它使用一个表并将标题行加粗，使其看起来完全相同。

.schedule-table h4 { margin: 0px }
.bold { font-weight: bold }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="table-responsive">
    <table class="table schedule-table">
        <tbody>
            <tr>
                <td colspan="4" class="bg-info">
                    <h4>December 17, 2014 (Wednesday)</h4>
                </td>
            </tr>
            <tr class="bold">
                <td>Date</td>
                <td>Time (IST)</td>
                <td>Title</td>
                <td>Speaker</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>13:00 pm to 14:00 pm</td>
                <td>intro</td>
                <td>me</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>14:00 pm to 16:00 pm</td>
                <td>main topic</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="4" class="bg-info">
                    <h4>December 17, 2014 (Wednesday)</h4>
                </td>
            </tr>
            <tr class="bold">
                <td>Date</td>
                <td>Time (IST)</td>
                <td>Title</td>
                <td>Speaker</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>13:00 pm to 14:00 pm</td>
                <td>intro</td>
                <td>me</td>
            </tr>
            <tr>
                <td>Dec 17</td>
                <td>14:00 pm to 16:00 pm</td>
                <td>main topic</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>