1. 首页
  2. 问答
  3. 清除我想尽办法，我能想到的，以清除这一差距，但仍然没有成功控制

清除我想尽办法，我能想到的，以清除这一差距，但仍然没有成功控制

2014-11-03 72 views
2

JSFiddle清除我想尽办法，我能想到的，以清除这一差距，但仍然没有成功控制

之间的差距。我也尝试设置填充= 0，但差距仍然存在。如果我缩小，差距将消失，无法弄清楚为什么！

这是最后td标签的CSS（产生间隙的蓝色行）：

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

enter image description here

来源

2014-11-03 f855a864

+0

尝试像边框间距：0;保证金：0;填充：0; ... – pbaldauf 2014-11-03 14:20:11

回答

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;

来源

2014-11-03 14:20:27 Zack

+1

这是建议写'0'而不是'0px' – pbaldauf 2014-11-03 14:23:12

+0

谢谢，但我在哪里放？ – f855a864 2014-11-03 14:26:48

+0

感谢Pbaldauf（编辑答案），并且属性需要放入您的TD的CSS中。 – Zack 2014-11-03 14:27:25

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。

来源

2014-11-03 14:33:32

+0

这太奇怪了，我将你的修改应用到了小提琴上，它完美地工作，但是当我在我的项目中进行更改时，它不工作:( – f855a864 2014-11-03 14:41:26

1

这是一个舍入异常。使用内表是一个坏主意。你应该用一个大表代替，这样的事情：

.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; 
 
}
<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>

来源

2014-11-03 14:36:53

+0

这是非常清洁，我会考虑改变我的方法，谢谢！ – f855a864 2014-11-03 15:15:39

+0

啊，但这种做法会使编码变得非常困难，我想我会坚持原来的方法。 非常感谢！ – f855a864 2014-11-03 15:23:00

相关问题

 相关问题