Толщина таблицы html: Атрибут border | htmlbook.ru

Leave a Comment / Html / By /

html — Вторая рамка вокруг ячеек таблицы в Chrome, как убрать?

Создаю таблицу используя свойство display: table. У ячеек таблицы есть своя рамка толщиной 5px, и свойство border-radius. В браузере Chrome (только) вокруг рамок ячеек появляется ещё одна рамка толщиной 1px (которая при масштабировании исчезает и видна только в местах скругления рамок ячеек, как на скриншоте). Как избавится от нее?

<div>
    <ul>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul>
        <li>1</li>
        <li>1</li>
    </ul>
</div>

.table {
    display: table;
    margin: 50px auto;
    background: #514B48;
    padding: 10px;
    border-radius: 5px;
}
.table-row {
    display: table-row;
    height: 90px;
}
.table-cell {
    display: table-cell;
    border: 5px solid #514B48;
    text-align: center;
    background: #1e1c20;
    color: #fff;
    width: 90px;
    min-width: 90px;
    line-height: 80px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    box-sizing: border-box;
}

  • html
  • css
  • css3

Возможно не совсем удачный пример, но принцип, как убрать этот баг, думаю будет понятен

<div>
    <ul>
        <div>
            <li>1</li>
        </div>
        <div>
            <li>1</li>
        </div>
    </ul>
    <ul>
        <div>
            <li>1</li>
        </div>
        <div>
            <li>1</li>
        </div>
    </ul>
</div>

Стили:

<style>
    . table {
            display: table;
            margin: 50px auto;
            background: #514B48;
            padding: 10px;
            border-radius: 5px;
    }
    .table-row {
            display: table-row;
            height: 90px;
    }
    .box {
            border-radius: 5px;
            padding: 10px;
            display: inline-block;
    }
    .table-cell {
            display: table-cell;
            text-align: center;
            background: #1e1c20;
            color: #fff;
            width: 90px;
            min-width: 90px;
            line-height: 80px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            box-sizing: border-box;
    }
</style>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Параметры таблицы table в html (свойства) | HTML

Подробности
Категория: HTML — при создании сайтов
Просмотров: 3127

Параметры и свойства таблицы понадобятся вам для придания ей более приглядного вида. В html это указывается в теге <table>.

Рассмотрим основные параметры тега table:

 

Свойство Описание Значение Пример
width Ширина таблицы (можно задавать в пикселах или процентах)  n, n%  <table>
cellpadding Расстояние между ячейкой и ее содержимым(в пикселах)  n  <table cellpadding=»4″>
cellspacing Расстояние между ячейками(в пикселах)  n  <table cellspacing=»4″>
align Выравнивание таблицы  left,
right,
center		  <table align=»center»>
border Толщина рамки(в пикселах)  n  <table border=»2″>
background Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.  url  <table background=»ссылка на изображение»>
bgcolor Цвет фона таблицы  #rrggbb  <table bgcolor=»#333333″>
cols Задает количество столбцов в таблице, в помощь браузеру при подготовке к ее отображению(практически никогда не указывается)  n  <table cols=»3″>
rules Определяет, где рисовать границы между ячейками  all,
groups,
cols, none,
rows		  <table rules=»cols»>
nowrap Запрещает переносы строк в тексте.
 		  <table nowrap>
frame Задание типа рамки таблицы  void
above
below
lhs
rhs
hsides
vsides
box		  <table frame=»hsides»>

Обратите внимание:

  1. если не указана ширина — то это означает, что она выбирается браузером автоматически;
  2. по-умолчанию ширина подгоняется под содержимое самих ячеек!
  3. по-умолчанию таблица выводится без рамки — поэтому задайте ее в теге table как это показано на примерах выше(иногда требуется указать и цвет).

Теперь ваши таблицы должны выглядеть всегда красиво!

Почему данная таблица(в этой статье выглядит неприглядно) — узнайте подробно тут — как правильно создать таблицу для сайта

 

Смотрите также:

  • таблица html цветов

Добавить комментарий

как изменить размер границы внутри таблицы html?

спросил

Изменено 1 год, 9 месяцев назад

Просмотрено 356 раз

я получил этот код для простой таблицы:

 
 как видите, только внешняя граница толстая, а внутренняя тонкая. .
как я могу установить размер границы, который повлияет на всю таблицу, чтобы внешний и внутренний были одинаковыми?
 спасибо.
  •  html
  •  html-таблица
  •  граница
  •  тр
 1
 стол, тд {
  граница: 1px сплошная #F9864D;
} 
 



Ячейка таблицы
Ячейка таблицы
Ячейка таблицы




Ячейка таблицы
Ячейка таблицы
Ячейка таблицы




Ячейка таблицы
Ячейка таблицы
Ячейка таблицы


   
 Вы можете редактировать атрибут td.
 Если мы создадим класс  customTable , мы можем использовать селектор CSS для выбора каждого элемента  td  в таблице. Теперь, если мы хотим создать больше таблиц, мы можем создать новую таблицу с другим классом и редактировать ее отдельно от других.
 .
 
 customTable {
    граница: 5px сплошная #F9864D;
    цвет фона: #EFEFEF;
    ширина: 450 пикселей;
}
.customTable тд {
  граница: 5px сплошная #F9864D;
} 
 
    
 4
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но никогда не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 css — Установить толщину линии между строками таблицы 
 спросил 
 Изменено
 4 года, 8 месяцев назад
 Просмотрено
 4к раз
 
 Как изменить толщину линии между двумя строками таблицы
например:
 (выделенный).
 Вот как выглядит мой код на данный момент:
 i {
  курсор: указатель;
}

а {
  цвет: наследовать;
}

й {
  пробел: предварительная обертка;
  размер шрифта: 25px;
  цвет: золотарник;
}

п {
  семейство шрифтов: «BioRhyme», с засечками;
  размер шрифта: 35px;
} 
 <таблица>
  
 Я использую Bootstrap Material Design v4
 Спасибо!
  •  css
  •  css-таблицы
 5
 Вы можете увеличить ширину границы между элементами в таблице, используя это в файле CSS:
 td {
  нижняя граница: 5px сплошной черный;
  верхняя граница: сплошной черный цвет 5 пикселей;
}
 
 Вы можете изменить  цвет  ,  толщину  и  стиль  границы, используя эти 3 значения.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  



Ячейка таблицы
Ячейка таблицы
Ячейка таблицы




Ячейка таблицы
Ячейка таблицы
Ячейка таблицы




Ячейка таблицы
Ячейка таблицы
Ячейка таблицы


 

    Ячейка таблицы
    Ячейка таблицы
    Ячейка таблицы
    

    

    Ячейка таблицы
    Ячейка таблицы
    Ячейка таблицы
    

    

    Ячейка таблицы
    Ячейка таблицы
    Ячейка таблицы
    

   
    

      Имя
      IP-адрес
      Порт
      Пинг
      Игроки
    


  
  
    

      Тест Гекса
      0.0.0.0
      27015
      коала
    

    

      Тест Гекса
      0.0.0.0
      27015
      коала