清除控件之间的差距

时间：2014-11-03 14:17:13

标签： html css

JSFiddle

我尝试了各种我能想到的方法来消除这个差距，但仍然没有成功。我也尝试设置padding = 0，但差距仍然存在。如果我缩小，差距将消失，无法找出原因！

这是最后一个td标签的css（创建差距的蓝色行）：

.tdtieudecuoi{
    text-align:left;
    background-color: #80A5CE;
    color: #FFF;
    font-weight: bold;
    padding:0;
}

enter image description here

3 个答案:

答案 0 :(得分：2)

在thkqgiai元素中添加border-top属性，如下所示...... 

.thkqgiai{
width:20% !important;
text-align:center;
color:white;
background-color: #910000;
border-top:1px solid #910000;
}

在TD属性中，将以下内容添加到边框属性... 

border-bottom:1px solid #80A5CE;
border-right:1px solid #80A5CE;

答案 1 :(得分：2)

您可以使用line-height代替height：

body {
  padding: 0;
}
table,
th,
td,
tr {
  border-collapse: collapse;
}
.tb {
  width: 500px;
}
.tb td {
  /*line-height: 25px;remove line height*/
  font-size: 13px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  height: 25px;/*add height*/
}
.tb th {
  padding: 5px;/*increase padding to 5px*/
}
/*2 cell đầu tiên, xác định độ rộng*/

.tdkq,
.tddd {
  padding: 0;
}
.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;
  color: #CC3F51;
  font-weight: bold;
  font-size: 16px;
  text-align: center !important;
  background-color: #FFF;
}
.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;
}
.tdtieudecuoi {
  text-align: left;
  background-color: #80A5CE;
  color: #FFF;
  font-weight: bold;
  padding: 0;
}
<div id="body_content">

  <br />
  <h2 class="tieudemien"> Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</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">Ki&#234;n Giang</th>
              </tr>
              <tr>
                <td class="tdkqgiai">Đặc biệt</td>
                <td class="tdkqsodb">048674</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nhất</td>
                <td class="tdkqso">38463</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nh&#236;</td>
                <td class="tdkqso">37309</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải ba</td>
                <td class="tdkqso">20091-22416</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bốn</td>
                <td class="tdkqso">28539-63139-58063-48935-41701-02723-41398</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải năm</td>
                <td class="tdkqso">1102</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải s&#225;u</td>
                <td class="tdkqso">5373-2976-4875</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bảy</td>
                <td class="tdkqso">551</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải t&#225;m</td>
                <td class="tdkqso">50</td>
              </tr>
              <tr>
                <td class="tdtieudecuoi"></td>
                <td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</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">9,1,2</td>
              </tr>
              <tr>
                <td class="tdkqgiai">1</td>
                <td class="tdkqso">6</td>
              </tr>
              <tr>
                <td class="tdkqgiai">2</td>
                <td class="tdkqso">3</td>
              </tr>
              <tr>
                <td class="tdkqgiai">3</td>
                <td class="tdkqso">9,9,5</td>
              </tr>
              <tr>
                <td class="tdkqgiai">4</td>
                <td class="tdkqso"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">5</td>
                <td class="tdkqso">1,0</td>
              </tr>
              <tr>
                <td class="tdkqgiai">6</td>
                <td class="tdkqso">3,3</td>
              </tr>
              <tr>
                <td class="tdkqgiai">7</td>
                <td class="tdkqso">4,3,6,5</td>
              </tr>
              <tr>
                <td class="tdkqgiai">8</td>
                <td class="tdkqso"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">9</td>
                <td class="tdkqso">1,8</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>

  </table>
  <table class="tb">
    <tbody>
      <tr>
        <td class="tdkq">
          <table class="tbkq">
            <tbody>
              <tr class="trkq">
                <th class="thkqgiai">Giải</th>
                <th class="thkqso">L&#226;m Đồng</th>
              </tr>
              <tr>
                <td class="tdkqgiai">Đặc biệt</td>
                <td class="tdkqsodb">090431</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nhất</td>
                <td class="tdkqso">54958</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nh&#236;</td>
                <td class="tdkqso">64035</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải ba</td>
                <td class="tdkqso">24934-62958</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bốn</td>
                <td class="tdkqso">93752-22930-27309-04977-91008-21818-94007</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải năm</td>
                <td class="tdkqso">2336</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải s&#225;u</td>
                <td class="tdkqso">0075-8638-4023</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bảy</td>
                <td class="tdkqso">204</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải t&#225;m</td>
                <td class="tdkqso">61</td>
              </tr>
              <tr>
                <td class="tdtieudecuoi"></td>
                <td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</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">9,8,7,4</td>
              </tr>
              <tr>
                <td class="tdkqgiai">1</td>
                <td class="tdkqso">8</td>
              </tr>
              <tr>
                <td class="tdkqgiai">2</td>
                <td class="tdkqso">3</td>
              </tr>
              <tr>
                <td class="tdkqgiai">3</td>
                <td class="tdkqso">1,5,4,0,6,8</td>
              </tr>
              <tr>
                <td class="tdkqgiai">4</td>
                <td class="tdkqso"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">5</td>
                <td class="tdkqso">8,8,2</td>
              </tr>
              <tr>
                <td class="tdkqgiai">6</td>
                <td class="tdkqso">1</td>
              </tr>
              <tr>
                <td class="tdkqgiai">7</td>
                <td class="tdkqso">7,5</td>
              </tr>
              <tr>
                <td class="tdkqgiai">8</td>
                <td class="tdkqso"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">9</td>
                <td class="tdkqso"></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>

  </table>
  <table class="tb">
    <tbody>
      <tr>
        <td class="tdkq">
          <table class="tbkq">
            <tbody>
              <tr class="trkq">
                <th class="thkqgiai">Giải</th>
                <th class="thkqso">Tiền Giang</th>
              </tr>
              <tr>
                <td class="tdkqgiai">Đặc biệt</td>
                <td class="tdkqsodb">545150</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nhất</td>
                <td class="tdkqso">78387</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải nh&#236;</td>
                <td class="tdkqso">06256</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải ba</td>
                <td class="tdkqso">39415-15189</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bốn</td>
                <td class="tdkqso">90260-01471-58016-40732-68891-50834-93561</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải năm</td>
                <td class="tdkqso">3390</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải s&#225;u</td>
                <td class="tdkqso">1556-3656-4176</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải bảy</td>
                <td class="tdkqso">016</td>
              </tr>
              <tr>
                <td class="tdkqgiai">Giải t&#225;m</td>
                <td class="tdkqso">23</td>
              </tr>
              <tr>
                <td class="tdtieudecuoi"></td>
                <td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</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"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">1</td>
                <td class="tdkqso">5,6,6</td>
              </tr>
              <tr>
                <td class="tdkqgiai">2</td>
                <td class="tdkqso">3</td>
              </tr>
              <tr>
                <td class="tdkqgiai">3</td>
                <td class="tdkqso">2,4</td>
              </tr>
              <tr>
                <td class="tdkqgiai">4</td>
                <td class="tdkqso"></td>
              </tr>
              <tr>
                <td class="tdkqgiai">5</td>
                <td class="tdkqso">0,6,6,6</td>
              </tr>
              <tr>
                <td class="tdkqgiai">6</td>
                <td class="tdkqso">0,1</td>
              </tr>
              <tr>
                <td class="tdkqgiai">7</td>
                <td class="tdkqso">1,6</td>
              </tr>
              <tr>
                <td class="tdkqgiai">8</td>
                <td class="tdkqso">7,9</td>
              </tr>
              <tr>
                <td class="tdkqgiai">9</td>
                <td class="tdkqso">1,0</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>

  </table>


</div>

检查我在css中的评论。

答案 2 :(得分：1)

这是一个四舍五入的异常现象。使用内部表是个坏主意。你应该使用一个大表，如下所示：

＆＃13;
＆＃13; 
.datatable {
  border-collapse: collapse;
}

.datatable td {
  border: 1px solid #CCCCCC;
  font-weight: bold;
  line-height: 25px;
  padding: 3px;
}

.datatable .noborder {
  border: hidden;  
}

.datatable .titlecell {
  color: #FFFFFF;
  background-color: #80A5CE;
}

.datatable .subtitlehead {
  background-color: #910000;
}

.datatable .subtitlecell {
  color: #CE4859;
}

.datatable .maincolcell {
  color: #910000;
}

.datatable .red {
  color: #FF0000;
}
＆＃13; 
<table class="datatable">
  <tr>
    <td colspan="4" class="titlecell noborder">Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</td>
  </tr>
  <tr>
    <td class="subtitlehead">Giải</td>
    <td class="subtitlecell">Kiên Giang</td>
    <td class="subtitlehead">Đầu</td>
    <td class="subtitlehead">Đuôi</td>
  </tr>
  <tr>
    <td class="maincolcell">Đặc biệt</td>
    <td class="red">048674</td>
    <td class="maincolcell">0</td>
    <td>9,1,2</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải nhất</td>
    <td>38463</td>
    <td class="maincolcell">1</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải nhì</td>
    <td>37309</td>
    <td class="maincolcell">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải ba</td>
    <td>20091-22416</td>
    <td class="maincolcell">3</td>
    <td>9,9,5</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải bốn</td>
    <td>28539-63139-58063-48935-41701-02723-41398</td>
    <td class="maincolcell">4</td>
    <td></td>
  </tr>
  <tr>
    <td class="maincolcell">Giải năm</td>
    <td>1102</td>
    <td class="maincolcell">5</td>
    <td>1,0</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải sáu</td>
    <td>5373-2976-4875</td>
    <td class="maincolcell">6</td>
    <td>3,3</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải bảy</td>
    <td>551</td>
    <td class="maincolcell">7</td>
    <td>4,3,6,5</td>
  </tr>
  <tr>
    <td class="maincolcell">Giải tám</td>
    <td>50</td>
    <td class="maincolcell">8</td>
    <td></td>
  </tr>
  <tr>
    <td class="titlecell noborder"></td>
    <td class="titlecell noborder">Xem kết quả trực tiếp tại iKetqua.net</td>
    <td class="maincolcell">9</td>
    <td>1,8</td>
  </tr>
  <tr>
    <td class="subtitlehead">Giải</td>
    <td class="subtitlecell">Lâm Đồng</td>
    <td class="subtitlehead">Đầu</td>
    <td class="subtitlehead">Đuôi</td>
  </tr>
  <tr>
    <td colspan="4">and so on&hellip;</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题