Question

我试图让这个表工作（代码显示在底部）

codepen.io （请尝试删除＆＃34; display：inline-block ＆＃34;来自＆＃34; .article2＆＃34;在CSS中查看差。）

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

但是当我添加＆＃34; display：inline-block＆＃34;时，标题＆＃39;布局会搞砸。但如果我删除它，滚动将被禁用。

无法弄清楚如何将标题放在正确的位置。

<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源代码。

希望有所帮助：）

如何让这个表显示？

1 个答案: