Clear the gap between controls - html

Question

JSFiddle
I tried every way I could think of to clear this gap but still without success. I also tried to set padding = 0 but the gap's still there too. If i zoom out, the gap will disapper, can't figure out why!
This is the css for the last td tag (the blue rows which creates the gap) :
.tdtieudecuoi{
text-align:left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding:0;
}

Answer 1

In your thkqgiai element add the border-top attribute as follows...
.thkqgiai{
width:20% !important;
text-align:center;
color:white;
background-color: #910000;
border-top:1px solid #910000;
}
And in the TD attributes add the following to border attributes...
border-bottom:1px solid #80A5CE;
border-right:1px solid #80A5CE;

Answer 2

Instead of line-height you can use 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ê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ì</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á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á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â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ì</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á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á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ì</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á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á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>
Check my comments in css.

Answer 3

This is a rounding anomaly. It is a bad idea to use an inner table. You should use one big table instead, something like this:
.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…</td>
</tr>
</table>