Как заставить эту таблицу отображаться?

Question

Я пытаюсь заставить эту таблицу работать (код показан внизу)

codepen.io (пожалуйста, попробуйте удалить "display: inline-block" из ".article2" в CSS, чтобы увидеть разницу.)

Мне нужно, чтобы статьи были прокручиваемыми (переполнение: авто), а заголовки выстраивались правильно.

Но когда я добавлю "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, но изменив исходный код HTML.

Надеюсь, поможет:)