Middle table column not centered?

Question

I want to center the column in the middle of my table so that the table header "Information" is centered exactly beneath the h2 header "His career". I have found out that the table is centered, but column 1 is wider than column 3:

I thought that this

            <colgroup>
              <col style="width:5%">
              <col style="width:90%">
              <col style="width:5%">
            </colgroup>

would give column 1 and column 3 equal width. Why doesn't it, and how can I make the 2 columns the same width?

My HTML and CSS:

body {
  font-family: monospace;
  background: linear-gradient(190deg, black 50%, #001A7A);
  color: white;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: min(4vw, 20px);
}

h1 {
  text-align: center;
  font-size: 60px;
}

#tribute-link {
  color: #BBFEFF;
}

#image {
  display: block;
  max-width: 60%;
  height: auto;
  margin: auto;
}

#img-caption {
    font-size: 18px;
}

.career {
  font-size: 35px;
  text-align: center;
}

#tribute-companies {
  margin: auto;
  max-width: 1500px;
  height: auto;
  border-spacing: min(3vw, 50px) 50px;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<body>
  <main id="main">
    <h1 id="title">Elon Musk</h1>
    <div id="img-div">
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Elon_Musk_Royal_Society.jpg" id="image" alt="A picture of Elon Musk">
      <p id="img-caption">Elon Musk on the Royal Society admissions day in London, July 2018</p>
    </div>
    <div id="tribute-info">
      <table id="tribute-companies">
        <h2 class="career">His career:</h2>
        <colgroup>
          <col style="width:5%">
          <col style="width:90%">
          <col style="width:5%">
        </colgroup>  
        <tr>
          <th><u>Company name</u></th>
          <th><u>Information</u></th>
          <th><u>Founded</u></th>
        </tr>
        <tr>
          <td>Zip2</td>
          <td>Zip2 was Elon Musk's first company. The computer manufacturer Compaq bought Zip2 for 307 million US-Dollars in 1999.</td>
          <td>1995</td>
        </tr>
        <tr>
          <td>X.com and PayPal</td>
          <td>X.com developed a payment system via e-mail. In the year 2000, X.com merged with Confinity, the company which was behind PayPal. eBay bought PayPal in 2002.</td>
          <td>1999</td>
        </tr>
        <tr>
          <td>SpaceX</td>
          <td>It's the world's leading commercial provider of orbital rocket launch services.</td>
          <td>2002</td>
        </tr>
        <tr>
          <td>Tesla</td>
          <td>Elon Musk invested in Tesla in the year 2004. It has become the biggest electric vehicle company since then.</td>
          <td>2003</td>
        </tr>
        <tr>
          <td>SolarCity</td>
          <td>SolarCity manufactured solar cells. It merged with Tesla in the year 2016.</td>
          <td>2006</td>
        </tr>
        <tr>
          <td>OpenAI</td>
          <td>OpenAI developed artificial intelligence. Elon Musk left the project in 2019.</td>
          <td>2015</td>
        </tr>
        <tr>
          <td>Neuralink</td>
          <td>Neuralink tries to connect the human brain to machines.</td>
          <td>2016</td>
        </tr>
        <tr>
          <td>The Boring Company</td>
          <td>A tunnel boring company.</td>
          <td>2016</td>
        </tr>
      </table>
    <div>
    <a href="https://de.wikipedia.org/wiki/Elon_Musk" id="tribute-link" target="_blank">Read more about Elon Musk on Wikipedia</a>
</body>

score 1 · Accepted Answer · answered Apr 12 '21 at 21:40

I think this css one works best, if you like it when shrunk down for mobile.

tr td:nth-child(1), tr td:nth-child(3)
{
min-width: 101px;
}

This also works but it breaks up the text, and doesn't look as good.

tr td:nth-child(1), tr td:nth-child(3)
{
word-break: break-all; 
}

score 1 · Answer 2 · answered Apr 12 '21 at 21:43

The reason is obviously that your left column contains words that are longer than the 5% width of the column. In this case the column will adjust its width automatically.

If you don't want these words to be broken (using hyphenation or similar), I would suggest you make both the first and third column wider by the same amount. The middle column must become narrower then. Try 10%/80%/10% or any value that suits your particular content.

score 0 · Answer 3 · answered Apr 12 '21 at 21:22

0

Try adding to your th and td

 word-wrap: break-word;

or you can use

 word-break: break-all;

answered Apr 12 '21 at 21:22

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

The 2nd solution centered it, but I don't want to reduce the width by splitting words. I'd much prefer to expand the 3rd column to the same width as the 1st column. Is there any way to do this? – dasJulian Apr 12 '21 at 21:39

Middle table column not centered?

3 Answers3