ширина td не работает — нет ключа, почему

Я понятия не имею, почему это дает мне такую проблему; я сделал функционирующие таблицы миллион раз. Попытка сделать таблицу полной ширины.

Первая ячейка должна занимать то место, которое не удается двум другим.
Вторая и третья ячейки должны быть 200px.

Цель состоит в том, чтобы не иметь ширины, приписываемой первой ячейке, чтобы она изменяла размер по мере изменения размера окна, но даже если я добавлю атрибут ширины ко всем трем (как это в приведенном ниже CSS), он не будет правильно выделяться. Он втискивается в дальний правый угол стола, хотя я отметил стол шириной 100%.

ПОЖАЛУЙСТА, ПОМОГИТЕ!

table.topper-table {
	width: 100%;
}

td.topper-table-nav {
	width: 65%;
	text-align: left;
}

td.topper-table-search {
	width: 10%;
	text-align: right;
  	padding-right: 25px;
}

td.topper-table-social {
	width: 25%;
	text-align: right;
	border-left: 1px solid #9db3c4;
	padding-left: 25px;
}
<table class="topper-table">
<tr>
<td class="topper-table-nav">
TEST
</td>
<td class="topper-table-search">
TEST 2
</td>
<td class="topper-table-social">
TEST 3
</td>
</tr>
</table>

Метки

1 ответ

  1. Я думаю, что это код, на который вы нацелены, который делает именно то, что вы пытаетесь достичь, как в Chrome, так и в Firefox. Я предполагаю, что вы уже пробовали что-то подобное (не с процентами, как показано выше). Вы можете протестировать мой код и запустить его, чтобы посмотреть, как он отображается на вашем компьютере?

    <!DOCTYPE html>
    <html>
    
    <head>
      <style>
        table.topper-table {
          width: 100%;
        }
        td.topper-table-nav {
          text-align: left;
          background-color: orange;
        }
        td.topper-table-search {
          width: 200px;
          text-align: right;
          padding-right: 25px;
          background-color: red;
        }
        td.topper-table-social {
          width: 200px;
          text-align: right;
          border-left: 1px solid #9db3c4;
          padding-left: 25px;
          background-color: lime;
        }
      </style>
    </head>
    
    <body>
    
      <table class="topper-table">
        <tr>
          <td class="topper-table-nav">TEST 1</td>
          <td class="topper-table-search">TEST 2</td>
          <td class="topper-table-social">TEST 3</td>
        </tr>
      </table>
    
    </body>
    
    </html>