中间 table 列未居中？

Question

我想在我的 table 中间居中列，这样 table header "信息" 是居中正好在 h2 header "His career" 下方。我发现 table 居中 ，但是 第 1 列比第 3 列宽 :

我以为这个

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

将使第 1 列和第 3 列的宽度相等。为什么不能，我怎样才能使两列的宽度相同？

我的 HTML 和 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>

Answer 1

尝试添加到您的 th 和 td

 word-wrap: break-word;

或者您可以使用

 word-break: break-all;

Answer 2

我认为这个 css 效果最好，如果你喜欢它缩小后用于移动设备的话。

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

这也有效，但它打断了文本，而且看起来不太好。

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

Answer 3

原因显然是您的左栏中包含的单词比栏宽的 5% 长。在这种情况下，列将自动调整其宽度。

如果您不希望这些词被打断（使用连字符或类似方式），我建议您将第一列和第三列加宽相同的量。然后中间的列必须变窄。尝试 10%/80%/10% 或适合您特定内容的任何值。

中间 table 列未居中？

Middle table column not centered?

html

css

html-table