表列的寬度收縮（僅鍍鉻）

在表適合文本加上一些額外的空間，APPX 4位左右的細胞。我有第二個類似的表，position:fixed;，它將文本週圍的額外空間縮小爲零，因此兩個表不再是相同的寬度。

我需要的是一個標題「表」具有相同的寬度，實際的表，而是被固定在同一個屏幕位置

編輯：這是唯一的瀏覽器。

編輯：要重現該問題，將下面的代碼複製到一個html文件，並用鍍鉻打開它：

<!DOCTYPE html> 
<html> 
<head> 

<link href="http://bookyoursite.com/assets/admin.css" media="screen" rel="stylesheet" type="text/css" /> 
</head> 

<body> 



<table style="position:fixed;background-color:white;top:0;left:100px;"> 
     <tr> 
      <td width="200px;"> 
       Park Name 
      </td> 
      <td> 
       Park Viewed 
      </td> 
      <td> 
       Book Now Button 
      </td> 
      <td> 
       Website Button 
      </td> 
      <td> 
       Call Button 
      </td> 
      <td> 
       Email Button 
      </td> 
      <td> 
       Book Now Call Button 
      </td> 
     </tr> 
</table> 
<table style="margin-left:100px;margin-top:20px"> 
    <tr> 
     <td width="200px;"> 
      Park Name 
     </td> 
     <td> 
      Park Viewed 
     </td> 
     <td> 
      Book Now Button 
     </td> 
     <td> 
      Website Button 
     </td> 
     <td> 
      Call Button 
     </td> 
     <td> 
      Email Button 
     </td> 
     <td> 
      Book Now Call Button 
     </td> 
    </tr> 


     <tr> 
      <td> 
       Camp Hatteras RV Resort and Campground 
      </td> 
      <td> 
        1 
      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
     </tr> 

</table> 

</body> 
</html>

這事做的事實，長園名左右換到下一行

來源

2013-10-16 Chris

究竟你的話的意思是被固定在同一個屏幕上的位置？ – 2013-10-16 15:04:14

在向下滾動表格時，表格的標題欄（這是一個不同的固定位置表格）將保留在窗口頂部 – Chris

，因此您希望表格標題保持靜態？ – 2013-10-16 15:08:43

默認情況下，表格單元格中的文本週圍沒有空格 - 它們會自動展開到足以容納內容（直到達到表格容器邊界，之後內容可能會打包）。聽起來就像在你的非標題表中，單元格被一些行中的單元格內容（其中文本比列標題更長）展開。如果您希望兩個表中的列具有相同的寬度，最簡單的解決方案是明確指定所有寬度。

注意：請勿使用width屬性<td>，請改用CSS。

來源

2013-10-16 15:04:18 Artyom

請參閱我的編輯以獲得可重現的問題 – Chris

工作演示：http://jsfiddle.net/L7tzB/

CODE：

<table cellpadding="0" cellspacing="0" border="1" align="center" style="text-align: center;"> 
<tr> 
    <td width="200px;">Park Name</td> 
    <td>Park Viewed</td> 
    <td>Book Now Button</td> 
    <td>Website Button</td> 
    <td>Call Button</td> 
    <td>Email Button</td> 
    <td>Book Now Call Button</td> 
</tr> 
</table> 
<table cellpadding="0" cellspacing="0" border="1" align="center" style="text-align: center;"> 
<tr> 
    <td width="200px;">Park Name</td> 
    <td>Park Viewed</td> 
    <td>Book Now Button</td> 
    <td>Website Button</td> 
    <td>Call Button</td> 
    <td>Email Button</td> 
    <td>Book Now Call Button</td> 
</tr> 
<tr> 
    <td>Camp Hatteras RV Resort and Campground</td> 
    <td>1</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
</tr> 
</table>

來源

2013-10-16 15:13:50

感謝您的回覆，請參閱我的編輯以瞭解可重現的問題 – Chris

表列的寬度收縮（僅鍍鉻）

回答

相關問題