样式表问题 - html和css

Question

我的表格样式有问题。我无法理解如何使用右侧的文字正确构建它，我的边框更宽，我无法修复它们的宽度。该表应如下图所示。

＆＃13;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  outline: 0;
  box-sizing: border-box;
}
body {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.667;
  color: #494949;
}
table {
  width: 701px;
  margin: 0 auto;
  padding: 30px 0px;
  border-collapse: collapse;
}
thead tr {
  color: #494949;
  line-height: 21px;
  font-weight: bold;
  border-bottom: 1px solid #9d9d9d;
}
tbody tr td {
  color: #494949;
  font-weight: normal;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #9d9d9d;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Year</th>
      <th>Quantity</th>
      <th>Percentage</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1980</td>
      <td>321</td>
      <td>45&percnt;</td>
      <td>32</td>
    </tr>
    <tr>
      <td>1981</td>
      <td>221</td>
      <td>41&percnt;</td>
      <td>31</td>
    </tr>
    <tr>
      <td>1982</td>
      <td>131</td>
      <td>42&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1983</td>
      <td>121</td>
      <td>44&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1984</td>
      <td>151</td>
      <td>41&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1986</td>
      <td>171</td>
      <td>71&percnt;</td>
      <td>11</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我只创建了一个包含表格和文本div的第一行div。并将css添加到.row-one {display：inline-flex;}以便并排制作。并将表格宽度设置为50％，将.text宽度设置为50％。您可以设置不同的宽度。有任何问题请评论我。谢谢。 LiveOnFiddle

＆＃13;

＆＃13;

memset

＆＃13;

body {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.667;
  color: #494949;
}

.row-one {
  display: inline-flex;
}

.text {
  width: 50%;
  margin-left: 1%;
  margin-top: 2%;
}

table {
  width: 50%;
  padding: 30px 0px;
  border-collapse: collapse;
}

thead tr {
  color: #494949;
  line-height: 21px;
  font-weight: bold;
  border-bottom: 1px solid #9d9d9d;
}

tbody tr td {
  color: #494949;
  font-weight: normal;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #9d9d9d;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

兄弟可以在下面的网址中找到一个很好的表格示例 http://www.indianmedicalholiday.com/cost-comparasion.php

只需检查它并复制css规则。希望它会喜欢它！ 感谢。