表格TD寬度不起作用

我在下拉菜單，顯然我不能改變寬度我嘗試了不同的方法。我希望每列的寬度爲200px，但不起作用。表格TD寬度不起作用

.dropbtn { 
 
    background-image: url("../sliki/meni.png"); 
 
    width: 220px; 
 
    height: 60px; 
 
    border: none; 
 
    cursor: pointer; 
 
    display: inline; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn {} #uslugibn { 
 
    background-image: url("../sliki/banner.png"); 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
#meninav { 
 
    background-color: #41c2ac; 
 
    height: 60px; 
 
    margin: 0; 
 
} 
 
#meninav li { 
 
    display: inline-block; 
 
}

<div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn"></button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
    <table> 
 
     <tr> 
 
     <td style="width:200px;"> 
 
      <a href="#">Берово</a> 
 
      <a href="#">Битола</a> 
 
      <a href="#">Богданци</a> 
 
      <a href="#">Валандово</a> 
 
      <a href="#">Велес</a> 
 
      <a href="#">Виница</a> 
 
     </td> 
 
     <td style="width:200px;"> 
 
      <a href="#">Гевгелија</a> 
 
      <a href="#">Гостивар</a> 
 
      <a href="#">Дебар</a> 
 
      <a href="#">Делчево</a> 
 
      <a href="#">Демир Капија</a> 
 
      <a href="#">Демир Хисар</a> 
 
     </td> 
 
     <td style="width:200px;"> 
 
      <a href="#">Кавадарци</a> 
 
      <a href="#">Кичево</a> 
 
      <a href="#">Кочани</a> 
 
      <a href="#">Кратово</a> 
 
      <a href="#">Крива Паланка</a> 
 
      <a href="#">Куманово</a> 
 
     </td> 
 
     <td style="width:200px;"> 
 
      <a href="#">Крушево</a> 
 
      <a href="#">Македоснки Брод</a> 
 
      <a href="#">Македонска Каменица</a> 
 
      <a href="#">Неготино</a> 
 
      <a href="#">Охрид</a> 
 
      <a href="#">Пехчево</a> 
 
     </td> 
 
     <td style="width:200px;"> 
 
      <a href="#">Прилеп</a> 
 
      <a href="#">Пробиштип</a> 
 
      <a href="#">Радовиш</a> 
 
      <a href="#">Ресен</a> 
 
      <a href="#">Свети Николе</a> 
 
      <a href="#"><strong>Скопје</strong></a> 
 
     </td> 
 
     <td style="width:200px;"> 
 
      <a href="#">Струга</a> 
 
      <a href="#">Струмица</a> 
 
      <a href="#">Тетово</a> 
 
      <a href="#">Штип</a> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

來源

2016-12-02 Ile Popivanov

對我來說似乎是200px：https://jsfiddle.net/vvr6hLgo/這裏可能有其他干擾。你能設置一個重現問題的小提琴嗎？ – Pevara

據我所知，這些列的寬度確實有200px。 – Rounin

出於好奇，你們使用的瀏覽器是什麼？我在鉻46，我的絕對不是200px。 –

寬度增加了TD內的錨和它的作品。

td > a { 
    width: 200px; 
}

演示：https://jsfiddle.net/1vkfg9nb/

來源

2016-12-02 16:54:11 Brad

當你的表是不尊重的寬度，它幾乎是更好地運用它的細胞通過細胞的基礎。但這種速戰速決似乎總是爲我工作：

table{ 
    table-layout: fixed; 
    width: 100%; 
}

Working fiddle as well

來源

2016-12-02 16:54:08

其他的答案已經包含了解決方案。
解釋爲什麼發生這種情況：表格總是嘗試儘可能地在它們所具有的空間中放入儘可能多的內容。即使這意味着忽略規則，例如width。

現在在這種情況下，表格的父母絕對定位，所以它的寬度不計算在內。這意味着該表的祖父母div只有（有效）包含了220px寬的按鈕，因此它本身只有220px寬，是一個內聯塊。

所以......那就是桌子容器的寬度，這就是它試圖擠進去的東西。這就是爲什麼它選擇忽略它的寬度屬性，只是使其自身與其內容一樣寬;它已經溢出了它的容器。

來源

2016-12-02 18:46:34

表格TD寬度不起作用

回答

相關問題