Safari瀏覽器從其他瀏覽器

Question

計算列的高度不同我有以下佈局的表：

<table> 
    <thead> 
    <tr> 
     <th rowspan="3" class="first-column">1. First column</th> 
     <th class="top-cell">1. Second column</th> 
     <th class="top-cell">1. Third column</th> 
    </tr> 
    <tr> 
     <th class="bottom-cell">2. Second column</th> 
     <th class="bottom-cell">2. Third column</th> 
    </tr> 
    <tr> 
     <th class="bottom-cell">3. Second column</th> 
     <th class="bottom-cell">3. Third column</th> 
    </tr> 
    </thead> 
</table> 

CSS：

table .first-column { 
    height: 200px; 
} 

th標籤與.first-column類總是有固定的高度。 .bottom-cell也可以固定高度，如果需要的話（我已經嘗試了這種方法，但它沒有解決問題）。 top-cell必須有動態高度。

而這個表格顯示爲我想在Firefox和Chrome中：列的高度設置成彼此成比例。

但Safari以不同的方式顯示它，它只是通過內容將高度設置爲前兩列，並拉伸最後一行以填充剩餘空間。但我想做到這一點的結果之一：

有任何解決方法，以顯示在Safari列，Firefox或Chrome呢？我知道如何用js做到這一點，所以我正在尋找一個純CSS的解決方案。

我已經嘗試設置爲.bottom-cell固定高度：

table .bottom-cell { 
    height: 20px; 
} 

我也試圖在.bottom-cell的固定高度calc功能結合起來，.top-cell：

table .bottom-cell { 
    height: 20px; 
} 

table .top-cell { 
    height: calc(100% - 40px); 
} 

---

Demo on plunker.

Answer 1

問題

有三個獨立但重要的事情要考慮您的問題。

1. 設置你的.first-column一個明確的高度對於爲什麼沒有被正確顯示在表的主罪魁禍首。

2. 依靠瀏覽器正確地分隔出你的元素充其量是棘手的。不要忘記我們甚至沒有考慮過各種版本的IE如何顯示你的表格。

3. 當前保存在您的表結構化的方式是不是語義正確的，你有一個<thead>所有的數據，一切都被認爲是你的數據（即的，而不是<th><td>）的標題。因此，請確保您使用正確的標籤更新您的表格。

解決方案

是很常見的開發者嘗試並考慮所有情況（即，可以容納任意數量文本的表格），但最終不切實際，並且通常會導致欠佳的設計/代碼一致性。

所以，我向你推薦的是爲你的數據設置明確的高度（這將不經意間設置你的高度.first-column），以便在不同的瀏覽器上提供更一致的觀看體驗。

代碼（Demo）

HTML

<table> 
    <tbody> 
    <tr> 
     <td rowspan="3">1. First column</td> 
     <td>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ea sed, incidunt adipisci amet ullam quae rem dignissimos aspernatur consequatur animi perferendis esse. Assumenda a voluptates deleniti officiis nobis consequuntur.</td> 
     <td>1. Porro obcaecati assumenda quae reiciendis at et, laudantium animi perferendis itaque corporis esse illo, alias eius, fugiat temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit commodi nihil, ex esse delectus vero libero, dignissimos iure aliquam voluptate id ab perferendis sapiente tempora. Voluptatem, perferendis ducimus in sit?</td> 
    </tr> 
    <tr> 
     <td class="static-data">2. Second column</td> 
     <td class="static-data">2. Third column</td> 
    </tr> 
    <tr> 
     <td class="static-data">3. Second column</td> 
     <td class="static-data">3. Third column</td> 
    </tr> 
    </tbody> 
</table> 

CSS

table { 
    width: 400px; 
} 

table td { 
    border: 1px solid #000; 
} 

.static-data { 
    height: 80px; 
} 

更新

上面的代碼具有蜂n更新以反映您在評論中的要求。第一行現在是動態的，而其餘的內容具有固定的高度。