Закругление контуров таблицы

@AlexOn1337 · Регистрация: 17.01.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, возник вопрос. С помощью CSS закруглил углы таблицы, но проблема в том, что у меня получается двойной контур, один из которых не закругляется. Можно ли его убрать или закруглить?

Qwerty_Wasd · 02.05.2018, 02:29

AlexOn1337, предоставьте пожалуйста html\css код, демонстрирующий Вашу проблему.

Добавлено через 31 минуту
Хотя в принципе и так понятно в чем проблема. В конфликте border-radius и border-collapse
Вариантов, как сделать скругленные края у таблицы, я думаю массу можно придумать. К примеру(я думаю он самый популярный) - песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="wrap">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

CSS
1
2
3
4
5
6
7
8
body{text-align:center}// <= косметика
.wrap{display:inline-block;border:2px solid #000;border-radius:10px;margin-top:100px}// <= margin-top косметика
table{border-collapse:collapse}
td{height:50px;width:150px;border:2px solid #000}
td:first-child{border-left:none}
td:last-child{border-right:none}
tr:first-child>td{border-top:none}
tr:last-child>td{border-bottom:none}

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

Амурский · 02.05.2018, 05:53

Здравствуйте. Самое основное, что уже написал перень - это

HTML5
1
table{border-collapse:collapse}

@AlexOn1337 · 02.05.2018, 10:21 **[ТС]**

Qwerty_Wasd, Таблица:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table border="1" cellspacing="0" align="center" width="50%" class="tableone">
    <tr align="center">
        <td>
            <a href="index.html">
                Главная
            </a>
        </td>
        <td>
            <a href="working.html">
                Деятельность
            </a>
        </td>
        <td>
            <a href="about.html">
                О предприятии
            </a>
        </td>
    </tr>
    <tr align="center">
        <td width="33%">
            <a href="management.html">
                Управленческая структура
            </a>
        </td>
        <td width="33%">
        </td>
        <td width="33%">
            <a href="contact.html">
                Контакты
            </a>
        </td>
    </tr>
</table>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
table
{
    border-radius: 20px;
}
table.tableone
{
    background-image:url("images/menu1.jpg");
    background-repeat:no-repeat;
    background-size:100%100%;
    border-color:skyblue;
}

@AlexOn1337 · 02.05.2018, 10:22 **[ТС]**

Амурский, к сожалению, если я так делаю, то остаются контуры, которые не закругляются

@Raqwp · 02.05.2018, 10:35

Сообщение от AlexOn1337

к сожалению, если я так делаю, то остаются контуры, которые не закругляются

Самый простой вариант задавать свойства округления для класса.

CSS
1
2
3
4
5
6
.br1{
    border-radius: 20px 0 0 0;
}
.br2{
    border-radius: 0 20px 0 0;
}

Ну и вид таблицы будет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<tr align="center">
        <td class="br1">
            <a href="index.html">
                Главная
            </a>
        </td>
        <td>
            <a href="working.html">
                Деятельность
            </a>
        </td>
        <td class="br2">
            <a href="about.html">
                О предприятии
            </a>
        </td>
    </tr>

@Raqwp · 02.05.2018, 10:39

Ну или

CSS
1
2
3
4
table{
    border-radius: 20px;
    border: none;
}

Qwerty_Wasd · 02.05.2018, 12:25

Амурский, вы вырвали из контекста

Сообщение от Амурский

Здравствуйте. Самое основное, что уже написал перень - это table{border-collapse:collapse}

и получилась чушь

Raqwp, AlexOn1337, идем сюда и смотрим =>песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrap">
  <table class="tableone">
    <tr>
      <td><a href="index.html">Главная</a></td>
      <td><a href="working.html">Деятельность</a></td>
      <td><a href="about.html">О предприятии</a></td>
    </tr>
    <tr>
      <td width="33%"><a href="management.html">Управленческая структура</a></td>
      <td width="33%"></td>
      <td width="33%"><a href="contact.html">Контакты</a></td>
    </tr>
  </table>
</div>

CSS
1
2
3
4
5
6
7
.wrap{display:inline-block;border:2px solid #000;border-radius:20px;margin:100px}// <= margin  косметика
table{border-collapse:collapse;text-align:center}
td{border:2px solid #000;padding:10px}
td:first-child{border-left:none}
td:last-child{border-right:none}
tr:first-child>td{border-top:none}
tr:last-child>td{border-bottom:none}

@Raqwp · 02.05.2018, 12:29

Сообщение от Qwerty_Wasd

Raqwp, AlexOn1337, идем сюда и смотрим =>песочница

Согласен) Но варианты решения бывают разные.
Я лишь увидел сообщение от тс, мол он так делает и у него не закругляется и накинул еще вариантик.

Qwerty_Wasd · 02.05.2018, 12:37

Raqwp,

Сообщение от Raqwp

.br1{
* * border-radius: 20px 0 0 0;
}
.br2{
* * border-radius: 0 20px 0 0;
}

при border-collapse это не выгорит к сожалению.

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@AlexOn1337 0 / 0 / 0 Регистрация: 17.01.2018 Сообщений: 50

	Закругление контуров таблицы 02.05.2018, 00:52. Показов 8466. Ответов 9 Метки css 3, html 5, table (Все метки) Здравствуйте, возник вопрос. С помощью CSS закруглил углы таблицы, но проблема в том, что у меня получается двойной контур, один из которых не закругляется. Можно ли его убрать или закруглить? 0

@AlexOn1337 0 / 0 / 0 Регистрация: 17.01.2018 Сообщений: 50
	02.05.2018, 10:22 [ТС]
	Амурский, к сожалению, если я так делаю, то остаются контуры, которые не закругляются 0

Закругление контуров таблицы

Решение