具有垂直标题和等宽单元格的HTML表

Question

我正在尝试创建一个表格，该表格的标题位于左侧，内容位于同一行且宽度相同。

我尝试的结果在下面的代码片段中。单元格的内容并没有限制在合理的单元格大小，它只是呈现为非常长的水平线（而不是分成几行）。

 .table-demo {
        text-align: center;
        border-collapse: collapse;
        table-layout: fixed;
        overflow: visible;
        display: table;
    }

        .table-demo tr {
            display: inline-block;

        }

        .table-demo th, td {
            display: block;
            /*width:100%;*/
            border: 1px solid;

        }

    .wrapper {
        /*overflow-x: auto;*/
        white-space: nowrap;
        max-width:600px;
    }

<div class=" col-md-10 wrapper " >
    <table class="table table-responsive table-demo"  width="100%;">
        <tr>
            <th>
               Spec
            </th>
            <th>
               Spec  2
            </th>
            <th>
               Tect de
            </th>
            <th>
               Price
            </th>
            <th>
                Terms
            </th>
        </tr>

            <tr>
                <td>

                    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and t versions of Lorem Ipsum.


                </td>
                <td>

                                            <p>789.00</p>

                </td>
                <td>
                    &#x2B;40
                </td>
            </tr>
            <tr>
                <td>
                      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,



                </td>
                <td>

                        <p >999.00</p>

                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td>
                    Lorem Ipsum issoftware like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into 
                    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                    of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                    Aldus PageMaker including versions of Lorem Ipsum.


                </td>
                <td>

                                        811.00
                </td>
                <td>
                    30
                </td>
            </tr>

    </table>
</div>

我希望它：

a。该表可放入引导区10列。

b。所有单元格都具有相同的宽度。

c。长文本可以使多行刹车。

Answer 1

嗨，

要在表格中获得垂直标题，我建议您仅将th单元格放入表格行中，而不要尝试使用CSS。

---

我准备了一个符合您问题要求的样本。

table, th, td {
  border: 1px solid tomato;
  border-collapse: collapse;
}

/*Point b: all cells have the same width*/
th, td {
  width: 50%;
}

<table>
  <tr>
    <th>Short</th>
    <td>Mallard is a kind of duck.</td>
  </tr>
  <tr>
    <th>Empty row</th>
    <td></td>
  </tr>
  <tr>
    <th>What is Lorem Ipsum?</th>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
  </tr>
</table>

---

干杯