thedivkiller thedivkiller - 1 month ago 8
CSS Question

Issue with styling table - html and css

I have problems with styling my table. I can't understand how I have to build it properly with the text from the right side and my borders are wider and I can't fix their width. The table should look like the picture below.
Final version of the table - image



<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>





* { 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; }

Answer

I just create row-one div which hold the table and text div. And add css to .row-one{display:inline-flex;} for make side by side. And set the table width 50% and .text width 50%. You can set width different. Any question ask me in comment. Thanks. LiveOnFiddle

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;
}
<div class="row-one">
<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>

  <div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
</div>