スタイリングテーブルの問題 - 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を保持行-1のdivを作成します。 .row-one {display：inline-flex;}にcssを追加して並べてください。そしてテーブルの幅を50％、.textの幅を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

ブラザーあなたはちょうどそれを点検し、CSSのrules.Hopeをコピーし、次のURLに http://www.indianmedicalholiday.com/cost-comparasion.php

を見つけることができる優れたテーブルの例では、それをお楽しみいただけます！おかげさまで