html - 如何让这个表显示？

Question

我正在尝试让这张表正常工作(代码显示在底部)

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。

我做了一个 fiddle working example使用(几乎)您自己的 CSS，但修改 HTML 源代码。

希望对您有所帮助:)