如何让这个 table 显示出来？

Question

我正在尝试让这个 table 工作（代码显示在底部）

codepen.io （请尝试从 CSS 中的“.article2”中删除“display:inline-block”到看看区别。）

我需要文章可以滚动（溢出：自动），标题可以正确排列。

但是当我添加 "display:inline-block" 时，标题的布局会乱七八糟。但是如果我删除它，滚动将被禁用。

不知道如何将标题放在正确的位置。

<table id="wrapper2">
    <tr>
          <td class="articletitle">
            <h3>Title of 1st article</h3>
          </td>

          <td class="articletitle">
            <h3>Title of 2nd article</h3>
          </td>
    </tr>

    <tr>
          <td class="article2">
            <p>Herp derpsum derps sherper herpy mer nerpy terp. Nerpy ter derpus derps. Herpem derps herpler herderder. Serp perp ner berp herpy perper dee derpsum tee derpus. Merp perp sherper derpler nerpy sherlamer derpy herpderpsmer dee. Sherp herpderpsmer merp derpus sherpus terp der serp. Terp derpus, sherlamer herpem serp. Sherlamer herp herpy herpderpsmer merp ner sherp der. Dee sherlamer sherp mer. Der herpy herp ler sherper. Berps derperker dee sherpus derpus ter perper, sherper herpler serp.<br><br><br><br><br></p>     
          </td>

          <td class="article2">
            <p>Serp derpler ter herp berp derpy herpler. Derperker derps merp ner perper herderder derpler herp derp. Derperker sherpus derps der berp derpy. Terp derp der mer. Ler terp merp derpsum derp tee. Serp derpus sherp derpler. Perp ner dee derpy sherpus derpler tee. Herpy herpem herp, der herderder serp perp derp ler. Dee ler herpderpsmer nerpy. Terp derp derpsum mer. Sherper tee ter, derps sherlamer. Derpus berps ner herpy mer dee sherlamer sherp. Serp herpem herpy derpler derps herpsum tee merpus.<br><br><br><br><br></p>
          </td>
            </tr>
        </table>

#wrapper2 {
max-width: 90%;
margin: auto;
text-align: center;
}

.articletitle {
    text-indent: 0;
    text-align: center;
    color: rgb(50,50,50);
}

.article2 {
      display:inline-block;
    max-width: 40%;
    height: 300px;
    margin: 20px auto 20px auto;
    padding-left: 35px;
    padding-right: 35px;
    font-family: "minerva-modern",sans-serif;
    text-indent: 50px;
    line-height: 1.3em;
    overflow: auto;
    text-overflow: ellipsis;
    content: "";
    background: -webkit-linear-gradient(#000 120px, #fff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Answer 1

overflow: auto 不应应用于 td 本身。将文章主体放入另一个容器（即 div、article 或其他容器）并对其应用 overflow: auto。

我用（几乎）你自己的 CSS 制作了一个 fiddle working example，但修改了 HTML 来源。

希望对您有所帮助:)

如何让这个 table 显示出来？

How to get this table to display?

html

css

html-table