1

In my table the text and the line that separates the column are misaligned. Although I tried to center the content and the separating line between the two columns with margin: 0 auto, and margin-left: auto; margin-right: auto;. The table still is misaligned.

How can I center the text and the lines that separates the two columns of the table?

table {
  font-family: arial, sans-serif;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

td {
  text-align: auto;
  padding: 8px;
  margin-bottom: 1000px;
  text-align: justify
}

td:last-child {
  border-left: 2.5px dotted gray;
  padding-left: 10px;
}

th {
  text-align: auto;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: ;
}

h1 {
  text-align: center;
}
<table border="0" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Tortor at risus viverra adipiscing at in tellus integer feugiat. Id leo in vitae turpis massa sed elementum tempus. Consectetur
        purus ut faucibus pulvinar elementum integer enim neque volutpat. Sed velit dignissim sodales ut. Aenean pharetra magna ac placerat vestibulum lectus. Placerat vestibulum lectus mauris ultrices. In nibh mauris cursus mattis molestie a iaculis
        at erat. Nibh venenatis cras sed felis eget velit aliquet sagittis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nunc scelerisque viverra mauris. Nisi quis eleifend quam adipiscing vitae proin sagittis
        nisl rhoncus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna et pharetra. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Pellentesque eu tincidunt tortor
        aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae. Cras adipiscing enim eu turpis. Auctor elit sed vulputate mi sit amet mauris. Egestas integer
        eget aliquet nibh. Suspendisse sed nisi lacus sed. In hac habitasse platea dictumst quisque sagittis purus. Duis ut diam quam nulla porttitor. Viverra orci sagittis eu volutpat odio facilisis. Nec feugiat in fermentum posuere urna nec tincidunt
        praesent. Nec dui nunc mattis enim ut. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum
        consectetur. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>
isherwood
  • 58,414
  • 16
  • 114
  • 157
anon
  • 836
  • 2
  • 9
  • 25
  • You've put the auto margins on the table element, which will center that in its container. It has no effect on the table's content. Are you simply trying to make the two columns have the same width? I'm not clear on your goals. – isherwood Feb 08 '21 at 19:44
  • `text-align: auto` isn't a thing. It's moot, though, because you override that with a duplicate rule. – isherwood Feb 08 '21 at 19:45
  • @isherwood my objective is to center the line that separates the two columns. That is, I would like the text to have the same proportion for both sizes. Right now it looks twisty – anon Feb 08 '21 at 19:47
  • When dealing with tables, talk about the table, not the text. "Twisty text" isn't helpful. So you want the two columns (data cells) to have the same width with the border centered? – isherwood Feb 08 '21 at 19:48

4 Answers4

2

You should add width: 50%;in your .td

table {
  font-family: arial, sans-serif;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

td {
  text-align: auto;
  padding: 8px;
  width: 50%;
  margin-bottom: 1000px;
  text-align: justify
}

td:last-child {
  border-left: 2.5px dotted gray;
  padding-left: 10px;
}

th {
  text-align: auto;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: ;
}

h1 {
  text-align: center;
}
<table border="0" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Tortor at risus viverra adipiscing at in tellus integer feugiat. Id leo in vitae turpis massa sed elementum tempus. Consectetur
        purus ut faucibus pulvinar elementum integer enim neque volutpat. Sed velit dignissim sodales ut. Aenean pharetra magna ac placerat vestibulum lectus. Placerat vestibulum lectus mauris ultrices. In nibh mauris cursus mattis molestie a iaculis
        at erat. Nibh venenatis cras sed felis eget velit aliquet sagittis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nunc scelerisque viverra mauris. Nisi quis eleifend quam adipiscing vitae proin sagittis
        nisl rhoncus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna et pharetra. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Pellentesque eu tincidunt tortor
        aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae. Cras adipiscing enim eu turpis. Auctor elit sed vulputate mi sit amet mauris. Egestas integer
        eget aliquet nibh. Suspendisse sed nisi lacus sed. In hac habitasse platea dictumst quisque sagittis purus. Duis ut diam quam nulla porttitor. Viverra orci sagittis eu volutpat odio facilisis. Nec feugiat in fermentum posuere urna nec tincidunt
        praesent. Nec dui nunc mattis enim ut. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum
        consectetur. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>
mia-wallace
  • 146
  • 6
1

You might add width: 50%; to your data cell (td), here's the full code:

table {
  font-family: arial, sans-serif;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

td {
  width: 50%;
  text-align: auto;
  padding: 8px;
  margin-bottom: 1000px;
  text-align: justify
}

td:last-child {
  border-left: 2.5px dotted gray;
  padding-left: 10px;
}

th {
  text-align: auto;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: ;
}

h1 {
  text-align: center;
}
AnonHexo
  • 118
  • 1
  • 13
1

The best way to give all columns the same width is usually table-layout: fixed. Hard-coded widths should be avoided in case you add or remove columns.

table {
  font-family: arial, sans-serif;
  width: 60%;
  table-layout: fixed;
  background: pink;
}

td {
  text-align: auto;
  padding: 8px;
  margin-bottom: 1000px;
  text-align: justify
}

td:last-child {
  border-left: 2.5px dotted gray;
  padding-left: 10px;
}

th {
  text-align: auto;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: ;
}

h1 {
  text-align: center;
}
<table border="0" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Tortor at risus viverra adipiscing at in tellus integer feugiat. Id leo in vitae turpis massa sed elementum tempus. Consectetur
        purus ut faucibus pulvinar elementum integer enim neque volutpat. Sed velit dignissim sodales ut. Aenean pharetra magna ac placerat vestibulum lectus. Placerat vestibulum lectus mauris ultrices. In nibh mauris cursus mattis molestie a iaculis
        at erat. Nibh venenatis cras sed felis eget velit aliquet sagittis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nunc scelerisque viverra mauris. Nisi quis eleifend quam adipiscing vitae proin sagittis
        nisl rhoncus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna et pharetra. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Pellentesque eu tincidunt tortor
        aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae. Cras adipiscing enim eu turpis. Auctor elit sed vulputate mi sit amet mauris. Egestas integer
        eget aliquet nibh. Suspendisse sed nisi lacus sed. In hac habitasse platea dictumst quisque sagittis purus. Duis ut diam quam nulla porttitor. Viverra orci sagittis eu volutpat odio facilisis. Nec feugiat in fermentum posuere urna nec tincidunt
        praesent. Nec dui nunc mattis enim ut. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum
        consectetur. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>
isherwood
  • 58,414
  • 16
  • 114
  • 157
1

This is a different approach using CSS display: table. (AKA look Ma, no <table>).

.dataframe {
  font-family: arial, sans-serif;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: table;
  border-collapse:collapse;
  border-spacing: 0;
}
.body {
  width: 100%;
  display: table-row-group;
}
.body .row {
  width: 100%;
  display: table-row;
}
.body .row span {
  padding: 0.5rem;
  margin-bottom: auto;
  width: 50%;
  text-align: justify;
  display: table-cell;
}
.body .row span:last-child { 
  border-left: 0.205rem dotted gray;
}
.thead {
  width: 100%;
  display: table-header-group;
}
.thead .row {
  width: 100%;
  display: table-row;
}
.thead .row span {
  display: table-cell;
  text-align: center;
  width: 50%;
  font-size: 1.25rem;
  font-weight: 500;
}
<div class="dataframe">
  <div class="thead">
    <div class="row">
      <span>Col 1</span>
      <span>Col 2</span>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <span>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Tortor at risus viverra adipiscing at in tellus integer feugiat. Id leo in vitae turpis massa sed elementum tempus. Consectetur
        purus ut faucibus pulvinar elementum integer enim neque volutpat. Sed velit dignissim sodales ut. Aenean pharetra magna ac placerat vestibulum lectus. Placerat vestibulum lectus mauris ultrices. In nibh mauris cursus mattis molestie a iaculis
        at erat. Nibh venenatis cras sed felis eget velit aliquet sagittis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nunc scelerisque viverra mauris. Nisi quis eleifend quam adipiscing vitae proin sagittis
        nisl rhoncus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas sed tempus urna et pharetra. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Pellentesque eu tincidunt tortor
        aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae. Cras adipiscing enim eu turpis. Auctor elit sed vulputate mi sit amet mauris. Egestas integer
        eget aliquet nibh. Suspendisse sed nisi lacus sed. In hac habitasse platea dictumst quisque sagittis purus. Duis ut diam quam nulla porttitor. Viverra orci sagittis eu volutpat odio facilisis. Nec feugiat in fermentum posuere urna nec tincidunt
        praesent. Nec dui nunc mattis enim ut. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum
        consectetur. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. </span>
      <span>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</span>
    </div>
    <div class="row">
      <span>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</span>
      <span>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</span>
    </div>
    <div class="row">
      <span>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</span>
      <span>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</span>
    </div>
    <div class="row">
      <span>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</span>
      <span> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</span>
    </div>
  </div>
</div>