Issue with styling table - html and css

Question

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

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

[ jsfiddle.net/tjbaezid/xskpzLuL/1 ] looking something like this one ?? — Baezid Mostafa
– Baezid Mostafa, Commented Oct 9, 2016 at 19:41

Baezid Mostafa · Accepted Answer · 2016-10-09 19:56:59Z

1

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>

answered Oct 9, 2016 at 19:56

Baezid Mostafa

2,7382 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thedivkiller Over a year ago

hey @Mostafa Baezid , Thank you! Can you have a look here ? stackoverflow.com/questions/39958466/…

Baezid Mostafa Over a year ago

@thedivkiller someone already give you the correct answer he also explain the problem and fix the error. SO do you have any problem on that answer ??

thedivkiller Over a year ago

Nope ! :) Thank you for the support guys :)

Asraful Haque · Accepted Answer · 2016-10-10 11:42:52Z

1

Brother a good table example you can find in the following url http://www.indianmedicalholiday.com/cost-comparasion.php

Just Inspect it and copy the css rules.Hope will enjoy it! Thanks.

answered Oct 10, 2016 at 11:42

Asraful Haque

1,1359 silver badges19 bronze badges

Collectives™ on Stack Overflow

Issue with styling table - html and css

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related