fit width <td> к содержанию

У меня есть таблица HTML, и я хотел бы установить ширину первого столбца на ширину самого большого элемента в ячейке этого столбца.fit width <td> к содержанию

Когда я установил ширину 50px, она выглядит хорошо: HTML table 50px width

Если установить ширину на «авто», однако, он получает продлен путь слишком много: HTML table auto width

Почему это сделать что и как я могу это исправить?

Вот мой код:

<html> 
    <body> 
     <style type="text/css"> 
      .tg {border-collapse:collapse;border-spacing:0;border-color:#ccc;} 
      .tg td{font-family:Calibri, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;} 
      .tg th{font-family:Calibri, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;} 
      .tg .tg-j4kc{background-color:#efefef;text-align:center} 
      .tg .tg-ud5c{background-color:#efefef;text-align:right;width:auto} 
      p.italic{font-style: italic} 
     </style> 

     <font face="Calibri, Arial, Sans-Serif" font size="3"> 
      The script<br><br> 

      <p class="italic">' + $ScriptName + '</p> 

      has sent a notification. See below for details... 
     </font><br><br> 

     <table class="tg" style='width:700px'> 
      <tr> 
       <th class="tg-j4kc" colspan="2">Script</th> 
      </tr> 
      <tr> 
       <td class="tg-ud5c">Path</td> 
       <td>"' + $ScriptPath + '"</td> 
      </tr> 
      <tr> 
       <td class="tg-ud5c">Server</td> 
       <td>' + $Server + '</td> 
      </tr> 
      <tr> 
       <td class="tg-ud5c">Name</td> 
       <td>' + $ScriptName + '</td> 
      </tr> 
     </table> 

     <font face="Calibri, Arial, Sans-Serif" font size="3"> 
      <br><u>Notification</u> 
      <br><br>' + $NotificationContent + ' 
     </font> 
    </body> 
</html>

Edit:
Это похоже на работу, когда я удалить style='width:700px' из <table> аргумента.

Я хотел бы иметь фиксированную ширину для таблицы, хотя из-за того, что может быть несколько таких таблиц, я не хочу, чтобы каждая таблица имела разную ширину.

источник

2015-03-26 mariu5

Вот скрипка http://jsfiddle.net/Lk6bf5mm/ Может быть связана с http://stackoverflow.com/questions/17150154/how-is-column-width-determined-in-browser – Huangism

@Huangism - ваша скрипка кажется идентичной второму изображению mariu5. Разве он не хочет повторить появление первого? – enhzflep

@enhzflep Да, OP хочет первого, я сделал скрипку, чтобы поддержать этот вопрос, и это предоставит людям более легкое время, разрешая это с ним. Если бы у ФП была скрипка, я бы не сделал один – Huangism

изменить ваш CSS следующим образом: -

tg .tg-ud5c { 
    background-color:#efefef; 
    text-align:right; 
    width:1%; 
    white-space: nowrap; 
}

Обновлено скрипка: http://jsfiddle.net/Lk6bf5mm/1/

источник

2015-03-26 14:43:57

В зависимости от того, является ли это или нет задумано как отзывчивая таблицы, вы можете рассмотреть возможность использования макс ширины или мин-ширины свойства для ваших столбцов, как еще одна альтернатива предыдущим предложениям.

источник

2015-03-26 15:02:20 Jeremy

fit width <td> к содержанию

ответ

Смежные вопросы