table {
  padding: 0;
}

table tr {
   border-top: 1px solid #cccccc;
  background-color: #ffffff;
   margin: 0;
  padding: 0;
}
table tr:nth-child(2n) {
  background-color: #f8f8f8;
}
table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}
table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}
table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

The above is my css.

<h2>Year 3: 2023</h2>

<table style="width:100%">
  <tr>
    <th>Lorem ipsum 1</th>
    <th>Lorem ipsum 2</th>
    <th>Lorem ipsum 3</th>
    <th>Lorem ipsum 4</th>
    <th>Lorem ipsum 5</th>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
</table>

The above is my HTML.

I am still pretty new to CSS and HTML so I'm a little confused. If I want to put most of my text in my second column, how do I make that one specifically wider? At the moment, when I run this code, it makes the second column very long vertically and it doesn't look great.

I am looking for something that looks like this codepen sandbox I created here: https://codepen.io/melonandthecoconut/pen/NWvqbKo. Picture here: https://i.imgur.com/VuH0Jsl.png.

CodePudding user response：

you can set width for each and every <td> in your table if you want. but in this particular case, if you need to make only the 2nd <td> wider, we can achieve that just using CSS :nth-child() pseudo-class.

table tr td:nth-child(2) {
   width: 40%;
   // just change this matches to your requirement.
}

the thing to remember when you using :nth-child is that we should use it on the element, not to the parent element

or else you can simply set the width property on the element like below with the style attribute.

<td style="width: 40%">

update working example