表格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>

对我来说似乎是200px：https://jsfiddle.net/vvr6hLgo/这里可能有其他干扰。你能设置一个重现问题的小提琴吗？ – Pevara

据我所知，这些列的宽度确实有200px。 – Rounin

出于好奇，你们使用的浏览器是什么？我在铬46，我的绝对不是200px。 –

答

宽度增加了TD内的锚和它的作品。

td > a { 
    width: 200px; 
}

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

答

当你的表是不尊重的宽度，它几乎是更好地运用它的细胞通过细胞的基础。但这种速战速决似乎总是为我工作：

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

Working fiddle as well

答

其他的答案已经包含了解决方案。
解释为什么发生这种情况：表格总是尝试尽可能地在它们所具有的空间中放入尽可能多的内容。即使这意味着忽略规则，例如width。

现在在这种情况下，表格的父母绝对定位，所以它的宽度不计算在内。这意味着该表的祖父母div只有（有效）包含了220px宽的按钮，因此它本身只有220px宽，是一个内联块。

所以......那就是桌子容器的宽度，这就是它试图挤进去的东西。这就是为什么它选择忽略它的宽度属性，只是使其自身与其内容一样宽;它已经溢出了它的容器。

表格TD宽度不起作用

相关推荐