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

Question

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

我尝试的结果在下面的代码 sn-p 中。单元格内容没有达到合理的单元格大小，它只是呈现为一条很长的水平线（而不是分成几行）。

 .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>

我希望它：

一个。适合 bootstrap 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>

---

干杯