跨度和表之间的明显差距

时间:2014-11-03 06:32:12

标签: html css

JSFiddle

我无法解决h2标签与表格之间的差距。此外,如果你看一下我的附图,你会在第二张表中看到,第一行的宽度(标题)比其余部分短,任何帮助都非常感谢!

h2和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

5 个答案:

答案 0 :(得分:2)

填充问题:

table td {
    padding: 0;   
}

请在此处查看:http://jsfiddle.net/uryeto61/4/

答案 1 :(得分:1)

演示 - http://jsfiddle.net/victor_007/uryeto61/2/

添加到table

cellpadding='0'

答案 2 :(得分:1)

试试这个 -

table td{
    padding: 0;   
}

答案 3 :(得分:1)

以下结果:http://jsfiddle.net/abruzzi/uryeto61/3/
您只需更改以下课程.tdkqtddd的填充:

.tdkq, .tddd {
    padding: 0;
}

答案 4 :(得分:0)

设置表td填充0

试试这个:



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>
&#13;
&#13;
&#13;

相关问题