Table css table width: CSS Table Size (Width and Height)

Leave a Comment / Css / By /

html — ширина таблицы CSS td — фиксированная, не гибкая

спросил

Изменено 6 месяцев назад

Просмотрено 362k раз

У меня есть таблица, и я хочу установить фиксированную ширину 30px на td. проблема в том, что когда текст в td слишком длинный, td растягивается шире, чем на 30 пикселей. Overflow:hidden не работает ни на td, мне нужен какой-то способ скрыть переполняющий текст и сохранить ширину td 30px.

 
  •  html
  •  css
  •  html-table
 Это не самый красивый CSS, но я заставил это работать:
 
 table td {
    ширина: 30 пикселей;
    переполнение: скрыто;
    отображение: встроенный блок;
    пробел: nowrap;
}
 
 Примеры с многоточием и без него:
 body {
    размер шрифта: 12px;
    семейство шрифтов: Tahoma, Helvetica, без засечек;
}

стол {
    граница: 1px сплошная #555;
    ширина границы: 0 0 1px 1px;
}
таблица тд {
    граница: 1px сплошная #555;
    ширина границы: 1px 1px 0 0;
}

/* Что вам нужно: */
таблица тд {
    ширина: 30 пикселей;
    переполнение: скрыто;
    отображение: встроенный блок;
    пробел: nowrap;
}

table. with-эллипсис td {
    переполнение текста: многоточие;
} 
 

    

        первыйвторойтретийчетвертый
    

    

        первыйэто очень долготретийчетвертый
    


 


    

        первыйвторойтретийчетвертый
    

    

        первыйэто очень долготретийчетвертый
    






 4
 вы также можете попробовать использовать это:
 таблица {
    макет таблицы: фиксированный;
}
таблица тд {
    ширина: 30 пикселей;
    переполнение: скрыто;
    переполнение текста: многоточие;
}
 
 http://www.w3schools.com/cssref/pr_tab_table-layout.asp
 2
 Растет не только ячейка  таблицы , но и сама таблица  . Чтобы избежать этого, вы можете назначить фиксированную ширину для таблицы, которая, в свою очередь, заставляет соблюдать ширину ячейки:
 таблица {
  макет таблицы: фиксированный;
  ширина: 120 пикселей; /* Важный */
}
тд {
  ширина: 30 пикселей;
}
 
 
 (Использование  overflow: hidden  и/или  text-overflow: многоточие  необязательно, но настоятельно рекомендуется для лучшего визуального восприятия) быть лучшей альтернативой другим данным ответам (которые работают с фиксированной шириной или без нее)
 1
 Приведенные выше предложения испортили макет моей таблицы, поэтому в итоге я использовал:
 td {
  минимальная ширина: 30 пикселей;
  максимальная ширина: 30 пикселей;
  переполнение: скрыто;
}
 
 Это ужасно поддерживать, но это проще, чем переделывать все существующие css для сайта. Надеюсь, это поможет кому-то еще.
 1
 Этот обходной путь мне помог.
 ..
 
 Хром 37.
для нефиксированной таблицы   :
 td {
    ширина: 30 пикселей;
    максимальная ширина: 30 пикселей;
    переполнение: скрыто;
}
 
 первые два важны! иначе — его утечет!
 Просто разделите число td на 100%. Например, у вас есть 4 td:
 
<таблица>

 Мы используем 25% в каждом td, чтобы максимизировать 100% пространство всей таблицы
 
 1
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Как изменить ширину таблицы с помощью css 
 спросил 
 7 лет, 5 месяцев назад 
 Изменено
5 месяцев назад
 Просмотрено
6к раз
 HTML
 <таблица>
 
 Я хочу изменить ширину таблицы на 600 пикселей. Я не мог понять селектор для изменения ширины. 
 Помогите пожалуйста, я изучаю css.
 Просто сделай так
  HTML 
 <таблица>
 
  CSS 
 таблица {
  ширина: 600 пикселей! важно;
  граница: 1px сплошной черный;
}
 
 
 
 2
 Измените значение ширины в атрибуте стиля.
 <таблица>
 
 дает таблицу шириной 600 пикселей.
 2
 Вы должны использовать так —
 таблица [стиль] {ширина: 600px !важно}
 
 Это указано прямо в вашем коде.
 <таблица>
 
 изменить это
 <таблица>
 
 В качестве альтернативы
 Используйте класс в своей таблице и используйте селектор в вашем файле css.
 <таблица>
 
 CSS
 .
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  
  

    
  первыйвторойтретийчетвертый
    

    

        первыйэто очень долготретийчетвертый
    

  

 
 1
 Поместите  div  внутрь  td  и задайте следующий стиль  width:50px;overflow: hidden;  в div 
  ссылка Jsfiddle 
 

  <дел>
    Длинная строка шириной более 50 пикселей
  



Это текст
Это текст, это текст
Это другой текст, это другой текст
Это последний текст, это последний текст




  

    блаблабла
      блаблабла
  

     

    abcd
      abcd
  


 

    блаблабла
      блаблабла
  

     

    abcd
      abcd