1. 首頁
  2. 問答
  3. 溢出內部的並排HTML表格

溢出內部的並排HTML表格

2015-03-13 48 views
0

我有一個彈出窗口，它將顯示兩個不同的表格。不同的用戶會看到不同的選項（錶行），所以我需要兩個獨立的表，看起來像一個。選項會變得複雜，所以最好使用兩個表格。溢出內部的並排HTML表格

這兩個表格都會顯示在疊加層內，因此空間有限，需要在溢出區域內。

這裏是一個的jsfiddle：http://jsfiddle.net/8h5axkbj/1/

藍色表是需要白表右側的一個。我已經嘗試過花車和內嵌塊，但我覺得我失去了一些東西。

<div id="popUpTableWrap"> 
<table class="table fl"> 
<thead> 
    <tr> 
     <th>Daily Hours</th> 
     <th><div class="dayTimeWidth">Sun</div></th> 
     <th><div class="dayTimeWidth">Mon</div></th> 
     <th><div class="dayTimeWidth">Tues</div></th> 
     <th><div class="dayTimeWidth">Wed</div></th> 
     <th><div class="dayTimeWidth">Thu</div></th> 
     <th><div class="dayTimeWidth">Fri</div></th> 
     <th><div class="dayTimeWidth">Sat</div></th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Coverage Start</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
    </tr> 
    <tr> 
     <td>Break Start</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
    </tr> 
    <tr> 
     <td>Break End</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
    </tr> 
    <tr> 
     <td>Coverage End</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Reaction</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Resolution</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Critical - React</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Critical - Resolve</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Urgent - Resolve</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 

    </tr> 
    <tr> 
     <td>Urgent - Resolve</td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
     <td><input type="text" class="form-input" value="00:00"></td> 
    </tr> 
</tbody> 
</table> 
<table class="table fl"> 
    <thead> 
    <tr> 
     <th class="nbd-title" colspan="2">Next Business Day</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="nbd">NBD</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Critical</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Urgent</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Non-Urgent</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Appointment</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Exception A</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">NBD Exception B</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">Severity</td> 
     <td class="nbd">XXXX</td> 
    </tr> 
    <tr> 
     <td class="nbd">Holiday Coverage</td> 
     <td class="nbd"> 
      <select> 
       <option>Y</option> 
       <option>N</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class="nbd">Business Process</td> 
     <td class="nbd">XXXX</td> 
    </tr> 
    </tbody> 
</table> 
<div class="clr"></div> 
</div>

來源

2015-03-13 Steve W.

+0

每個表應該是一個div裏面，然後你可以對齊這樣的： .table_left {浮動：左;顯示：塊; width：calc（100％ - 145px）; } .table_right {float：left;顯示：塊;寬度：145px; } （145px是藍色的表格） – Patrick 2015-03-13 13:19:43

回答

0

非常代碼..

我更新你的代碼，並添加CSS的幾行，兩班到table

.table1 { 
    width: 80%; 
} 

.table2 { 
    width: 20%; 
} 

.fl { 
    float: left; 
} 
.table { 
    display: block; 
    position: relative; 
}

這裏是你的提琴： http://jsfiddle.net/8h5axkbj/7/

來源

2015-03-13 13:25:41

+0

這是非常正確的，除非我需要首先將表格封裝在div中並設置固定寬度。 – 2015-03-13 13:58:42

0

您可以將兩個表都設置爲inline-block。

table.one {width:650px; display:inline-block;} 
table.two {width:150px; display:inline-block;}

http://jsfiddle.net/8h5axkbj/6/

您需要確保兩個表具有相同的行數，否則將無法正確對齊。在那裏

來源

2015-03-13 13:19:51 wf4

+0

這是行不通的，因爲表格會在溢出之內。我將使用的彈出窗口只有575px左右。 – 2015-03-13 13:27:05

0 
Float left for both tables helps to align tables properly.

Click here

來源

2015-03-13 13:19:55

+0

它需要在溢出內。 – 2015-03-13 13:24:35

+0

根據提供的html，這兩個表放置在溢出div（＃popup-coverages-overflow）中。 – 2015-03-13 13:32:53

+0

它低於另一個表格：https：//jsfiddle.net/8h5axkbj/9/ – 2015-03-13 13:40:47

相關問題

 相關問題