Reputation: 277

Clear gap between span and table

I can't resolve the gap between a h2 tag and a table. Beside, if you look at my attached image, you will se that in the second table, the first row's width(header) is shorter than the rest, any help is greatly appreciated!

h2 and table css :

.tieudemien
{
    line-height: 24px;
    background-color: #80A5CE;
    text-transform: uppercase;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    width:498px;
    margin-bottom: 0;
    padding-bottom: 0; 
    margin-left:1px;
}

.tb {
    width: 500px;
    padding-top:0;
    padding-bottom:0;
}

enter image description here

Upvotes: 0

Answers (5)

Amy

Reputation: 4032

Set table td Padding 0

Try This:

body {} table,
th,
td,
tr {
  border-collapse: collapse;
}
.tb {
  width: 500px;
  padding-top: 0;
  padding-bottom: 0;
}
/*2 cell đầu tiên, xác định độ rộng*/

.tdkq {
  width: 70%;
  vertical-align: top;
}
.tddd {
  width: 30%;
  vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/

.tbkq {
  width: 100%;
  word-wrap: break-word;
  table-layout: fixed;
  float: left;
  margin-bottom: 0;
  padding-bottom: 0;
  border-right: 1px solid #CCC;
}
.tbdd {
  width: 100%;
}
.tbdd td {
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/

.trkq {
  width: 100%;
}
.thkqgiai {
  width: 20% !important;
  text-align: center;
  color: white;
  background-color: #910000;
}
.thkqso {
  width: 80% !important;
}
.tdkqgiai {
  text-align: center;
  background-color: #F9F9F9;
  color: #910000;
}
.tdkqgiaidb {
  text-align: center;
  color: white;
  background-color: #910000;
}
.tdkqso {
  text-align: center;
  word-wrap: break-word !important;
  border-top: 1px solid #CCC;
}
.tdkqsodb {
  text-align: center;
  word-wrap: break-word !important;
  color: red;
  border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/

.thdddau {
  width: 30%;
  color: white;
  background-color: #910000;
}
.thddduoi {
  width: 70%;
  color: white;
  background-color: #910000;
}
/*tiêu đề cho bảng kq*/

.tieudemien {
  line-height: 24px;
  background-color: #80A5CE;
  text-transform: uppercase;
  color: #FFF;
  font-weight: bold;
  font-size: 12px;
  width: 500px;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-left: 1px;
}
.tieudecuoi {
  background-color: #80A5CE;
  text-transform: uppercase;
  color: #FFF;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 0;
  width: 300px !important;
}
.tdtieudecuoi {
  text-align: right;
  background-color: #80A5CE;
  text-transform: uppercase;
  color: #FFF;
  font-weight: bold;
  font-size: 12px;
}
table td {
  padding: 0;
}

<h2 class="tieudemien"> Kết quả xổ số Miền Bắc ngày 02-11-2014</h2>
<table class="tb">
  <tbody>
    <tr>
      <td class="tdkq">
        <table class="tbkq">
          <tbody>
            <tr class="trkq">
              <th class="thkqgiai">Giải</th>
              <th class="thkqso">BTB</th>
            </tr>
            <tr>
              <td class="tdkqgiai">Đặc biệt</td>
              <td class="tdkqsodb">23411</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải nhất</td>
              <td class="tdkqso">37428</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải nh&#236;</td>
              <td class="tdkqso">38460-75356</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải ba</td>
              <td class="tdkqso">02055-66542-36814-52154-66881-20546</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải bốn</td>
              <td class="tdkqso">6300-7736-6062-3408</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải năm</td>
              <td class="tdkqso">0235-2078-1344-6340-4550-6337</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải s&#225;u</td>
              <td class="tdkqso">046-421-944</td>
            </tr>
            <tr>
              <td class="tdkqgiai">Giải bảy</td>
              <td class="tdkqso">88-98-24-21</td>
            </tr>
            <tr>
              <td class="tdtieudecuoi"></td>
              <td class="tdtieudecuoi">span</td>
            </tr>
          </tbody>
        </table>
      </td>


      <td class="tddd">
        <table class="tbdd">
          <tbody>
            <tr class="trkq">
              <th class="thdddau">Đầu</th>
              <th class="thddduoi">Đuôi</th>
            </tr>

            <tr>
              <td class="tdkqgiai">0</td>
              <td class="tdkqso">0,8</td>
            </tr>
            <tr>
              <td class="tdkqgiai">1</td>
              <td class="tdkqso">1,4</td>
            </tr>
            <tr>
              <td class="tdkqgiai">2</td>
              <td class="tdkqso">8,1,4,1</td>
            </tr>
            <tr>
              <td class="tdkqgiai">3</td>
              <td class="tdkqso">6,5,7</td>
            </tr>
            <tr>
              <td class="tdkqgiai">4</td>
              <td class="tdkqso">2,6,4,0,6,4</td>
            </tr>
            <tr>
              <td class="tdkqgiai">5</td>
              <td class="tdkqso">6,5,4,0</td>
            </tr>
            <tr>
              <td class="tdkqgiai">6</td>
              <td class="tdkqso">0,2</td>
            </tr>
            <tr>
              <td class="tdkqgiai">7</td>
              <td class="tdkqso">8</td>
            </tr>
            <tr>
              <td class="tdkqgiai">8</td>
              <td class="tdkqso">1,8</td>
            </tr>
            <tr>
              <td class="tdkqgiai">9</td>
              <td class="tdkqso">8</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>

</table>

Upvotes: 0