テーブルのTD幅が動作しない

Question

私はドロップダウンメニューを作っていますが、明らかに幅を変更できません。各列の幅を200ピクセルにしたいが、それは機能しません。

.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>

Answer 1

は、TD内のアンカーに幅を追加し、それが動作します。

td > a { 
    width: 200px; 
} 

デモ：https://jsfiddle.net/1vkfg9nb/

Answer 2

あなたのテーブルは幅を尊重していない場合は、セル単位でそれを適用することはほとんど良いでしょう。しかし、このクイックフィックスはいつも私のために働くようだ：

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

Working fiddle as well

Answer 3

他の答えはすでに解決策が含まれています。
これがなぜ起こるのかを説明する：テーブルは常に、自分が持つスペースにできるだけ多くのコンテンツを収めようとします。たとえこれが規則を無視することを意味するとしても、widthのように。

この場合、テーブルの親は絶対的に配置されているため、その幅はカウントされません。つまり、テーブルの祖父母のdivには220pxの幅のボタンしか含まれていないため、インラインブロックである220pxの幅しかありません。

これはテーブルのコンテナの幅であり、それが自分自身を圧迫しようとするものです。そのため、幅のプロパティを無視するように選択し、内容の幅だけを広げます。そのままコンテナをオーバーフローさせます。