Проблема с таблицей стилизации - html и css

Question

У меня проблемы с дизайном моего стола. Я не могу понять, как я должен правильно его построить с текстом с правой стороны, а мои границы шире, и я не могу исправить их ширину. Таблица должна выглядеть так, как показано на рисунке ниже.

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

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

Answer 1

Я просто создать рядного один DIV, который держать таблицу и текст DIV. И добавьте css в .row-one {display: inline-flex;} для создания бок о бок. И установите ширину таблицы 50% и ширину текста 50%. Вы можете установить ширину разной. Любой вопрос спрашивает меня в комментарии. Благодарю. 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>

Answer 2

брат хороший пример таблицы можно найти в следующей ссылке http://www.indianmedicalholiday.com/cost-comparasion.php

Просто осмотрите его и скопировать CSS rules.Hope понравится ! Спасибо.