HTML CSS表格線重疊

Question

下面是代碼：

<div class="timetable" class="table"> 
    <table border="1"> 
     <tr class="ura"> 
      <th class="ura-ura"><span>1.1</span></th> 
      <th class="ura-predmet"><span>1.2</span></th> 
      <th class="ura-ucilnica"><span>1.3</span></th> 
     </tr> 

     <tr class="ura-nadomescanje"> 
      <th class="ura-nadomescanje-ura"><span>2.1</span></th> 
      <th class="ura-nadomescanje-predmet"><span>2.2</span></th> 
      <th class="ura-nadomescanje-ucilnica"><span>2.3</span></th> 
      <th class="ura-nadomescanje-profesor"><span>2.4</span></th> 
     </tr> 

     <tr class="ura"> 
      <th class="ura-ura"><span>3.1</span></th> 
      <th class="ura-predmet"><span>3.2</span></th> 
      <th class="ura-ucilnica"><span>3.3</span></th> 
     </tr> 

    </table> 
</div> 

和CSS（這些代碼）： http://jsfiddle.net/AV38G/10/

我想在表中3行，但與同一班線重疊。我不知道爲什麼。

如何我想： 1.1 1.2 .... 2.1 2.2 ... 3.1 3.2 ...

但我總是得到： 3.1 3.2 ... 2.1 2.2 ...

我想第三行寫在第一行上。但我不知道如何解決它。

Answer 1

刪除position: absolute這裏是一個updated fiddle有工作的HTML和CSS。你可能不得不調整一些間距，但它基本上是做另一個應該的。

我使用div元素改寫了你的HTML，並大大簡化你的CSS，這是在很多地方是多餘的。您應該儘量避免使用

position: absolute; 

如果可能的話。

Answer 2

您需要從行類

Answer 3

你TABEL有你應該使用TD，而不是TH 你也並不需要所有的樣式每個單元嘗試做這個錯誤的小區定義：

<table border="1"> 
     <tr class="ura"> 
      <td class="ura">1.1</td> 
      <td class="predmet">1.2</td> 
      <td class="ucilnica">1.3</td> 
      <td class="profesor"></td> 
     </tr> 
     <tr class="nadomescanje"> 
      <td class="ura">2.1</td> 
      <td class="predmet">2.2</td> 
      <td class="ucilnica">2.3</td> 
      <td class="profesor">2.4</td> 
     </tr> 
     <tr class="ura"> 
      <td class="ura">3.1</td> 
      <td class="predmet">3.2</td> 
      <td class="ucilnica">3.3</td> 
      <td class="profesor"></td> 
     </tr> 
    </table> 

隨着一個更簡單的樣式表（沒有所有的寬度誤差）

table { 
    font-family: roboto, sans-serif; 
    width:100%; 
} 
tr { 
    width: 100%; 
    height: 70px; 
} 
td { 
    height: 70px; 
    color: #7f8c8d; 
    background-color: #ecebeb; 
    padding:5px; 
    vertical-align:middle; 
    text-align:center; 
} 
tr.ura td.ura { 
    background-color: #53ccea; 
} 
tr.nadomescanje td.ura { 
    background-color: #e74c3c; 
} 
td.ura { 
    color: #fff; 
    font-weight: lighter; 
    font-size: 2rem; 
    text-align: left; 
} 
td.ucilnica { 
    font-size: 1.2rem; 
} 
td.predmet { 
    font-weight: 600; 
    font-size: 1.5rem; 
} 
td.profesor { 
    font-weight: lighter; 
    font-style: italic; 
}