Хорошо, это прослушивало меня, поэтому я провел некоторое тестирование.

Кажется, что критическая вещь, которую вы отсутствовали, была border-collapse:separate; в элементе таблицы. Это мешает клеткам соединять их границы вместе, что позволяет им получить радиус границы.

Надеюсь, что это поможет.

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

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

Table-canvas { -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow:hidden; border-radius: 10px; -pie-background: linear-gradient(#ece9d8, #E5ECD8); box-shadow: #666 0px 2px 3px; behavior: url(Include/PIE.htc); overflow: hidden; }

Не волнуйтесь, если ваша Visual Studio CSS intellisense дает вам зеленую подсветку для неизвестных свойств, она по-прежнему работает, когда вы ее запускаете. Некоторые элементы не очень четко документированы, но примеры довольно хороши, особенно на первой странице.

Добавьте теги :

Цвет ячеек, содержимое и форматирование, конечно, например.
это о расстоянии от заполненных цветом ячеек в div. Таким образом, граница черных ячеек/граница стола фактически являются цветом фона div.
Обратите внимание, что вам нужно установить радиус div-border примерно на 2 значения больше, чем отдельные радиусы границы ячейки, чтобы получить гладкий округленный угловой эффект.

ПРИМЕЧАНИЕ. Код HTML/CSS ниже следует просматривать только в IE. Код не будет отображаться правильно в Chrome!

Нам нужно помнить, что:

В таблице есть граница: ее внешняя граница (которая также может иметь радиус границы).

У самих ячеек также есть границы (которые тоже могут иметь радиус границы).

Границы таблицы и ячейки могут мешать друг другу:

Граница ячейки может пробиваться через границу таблицы (то есть: граница таблицы).

Чтобы увидеть этот эффект, измените правила стиля CSS в приведенном ниже коде следующим образом:
я. таблица {border-collapse: separate;}
II. Удалите правила стиля, которые расположены вокруг угловых ячеек таблицы.
III. Затем играйте с интервалом между границами, чтобы вы могли видеть помехи.

Однако границы таблицы и границы ячеек могут быть COLLAPSED (с использованием: border-collapse: collapse;).

Когда они свертываются, границы ячейки и таблицы мешают по-другому:

я. Если граница стола округлена, но границы ячеек остаются квадратными, форма ячейки имеет приоритет, и таблица теряет изогнутые углы.

II. И наоборот, если угловая ячейка изогнута, но граница таблицы квадратная, тогда вы увидите уродливый квадратный угол, граничащий с кривизной угловых ячеек.

Учитывая, что атрибут ячейки имеет приоритет, способ округления таблицы по четырем углам:

я. Свертывание границ на столе (с использованием: border-collapse: collapse;).

II. Установка желаемой кривизны на угловые ячейки таблицы.
III. Не имеет значения, закруглен ли угол стола (т.е. Его радиус границы может быть равен нулю).

Zui-table-rounded { border: 2px solid blue; /*border-radius: 20px;*/ border-collapse: collapse; border-spacing: 0px; } .zui-table-rounded thead th:first-child { border-radius: 30px 0 0 0; } .zui-table-rounded thead th:last-child { border-radius: 0 10px 0 0; } .zui-table-rounded tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .zui-table-rounded tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } .zui-table-rounded thead th { background-color: #CFAD70; } .zui-table-rounded tbody td { border-top: solid 1px #957030; background-color: #EED592; }

Следующее - это то, что я использовал, которое работало для меня в разных браузерах, поэтому я надеюсь, что это поможет кому-то в будущем:

#contentblock th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; behavior: url(/images/border-radius.htc); border-radius: 6px 0 0 0; } #contentblock th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; behavior: url(/images/border-radius.htc); border-radius: 0 6px 0 0; } #contentblock tr:last-child td:last-child { border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; behavior: url(/images/border-radius.htc); border-radius: 0 0 6px 0; } #contentblock tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; behavior: url(/images/border-radius.htc); border-radius: 0 0 0 6px; }

Очевидно, что часть #contentblock может быть заменена/отредактирована по мере необходимости, и вы можете найти файл border-radius.htc , выполнив поиск в Google или в вашем любимом веб-браузере.

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

Если вы используете thead , tfoot или th , просто замените tr:first-child и tr-last-child и td на них.

#table-wrap { border: $border solid $color-border; border-radius: $border-radius; } table { border-collapse: collapse; border-spacing: 0; } table td { border: $border solid $color-border; } table td:first-child { border-left: none; } table td:last-child { border-right: none; } table tr:first-child td { border-top: none; } table tr:last-child td { border-bottom: none; } table tr:first-child td:first-child { border-top-left-radius: $border-radius; } table tr:first-child td:last-child { border-top-right-radius: $border-radius; } table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; } table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

Вы можете попробовать это, если хотите скругленные углы на каждой стороне таблицы, не касаясь ячеек: http://jsfiddle.net/7veZQ/3983/

Пример HTML

SCSS, легко преобразованный в CSS, используйте sassmeister.com

// General CSS table, th, td { border: 1px solid #000; padding: 8px 12px; } .round-corner { border-collapse: collapse; border-style: hidden; box-shadow: 0 0 0 1px #000; // fake "border" border-radius: 4px; // Maybe there no THEAD after the caption? caption + tbody { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:first-child { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:last-child { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } thead { tr:last-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tfoot { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } // Reset tables inside table table tr th, table tr td { border-radius: 0; } }

А данные Кольцевая диаграмма отображает значение в процентах от всего и это формат диаграммы доступны для использования в Microsoft PowerPoint 2010 и 2013 годах Категории представлены отдельными кусочками. Кольцевая графики функционально идентичны секторные диаграммы в том смысле, что вы можете отобразить практически одни и те же данные. Есть два типа диаграмм: пончик пончик и взорвался пончик.

Основной способ создания пончика диаграммы с помощью галереи при вставке диаграммы.

Выберите Вставить -> Chart, а затем выберите Пончик из списка.

Теперь вы можете настроить диаграмму путем добавления данных в таблицу. Если вам нужно добавить новую серию данных с концентрической окружности в графике, вы можете добавить новый столбец в выборке данных в электронной таблице.

Другой способ сделать Кольцевая диаграммы в PowerPoint 2010

Вот еще один основной способ добавить диаграмму пончика диаграммы в PowerPoint из простой круговой диаграммы.

Мы начинаем создание простой круговой диаграммы в PowerPoint. Основной круговая диаграмма в PowerPoint 2010 можно вставить с помощью диаграммы галереи.

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

Теперь повторите процесс и добавить дополнительный концентрический круг в центре первого круга формы, который был добавлен.

Теперь, давайте заполнить первую форму с белым фоном и второй формы (внутренний один) с хорошим фоном стиле. Вы можете использовать градиенты, например радиальный стиль градиента плюс хороший эффект тени.

Здесь у вас есть отдельные элементы, которые мы будем использовать, чтобы составить график пончика. Два кружил формы и круговой диаграммы.

Вы можете настроить внутренний круг путем изменения свойств формата Shape.

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

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

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код	Описание	Вид
div { border-radius: 10px; }	Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; }	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; }	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; }	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Вы сами себе учитель

Результат данного примера показан на рис. 4.

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Предположим, пользователь располагает данными в абсолютных величинах. Ему нужно отобразить информацию на диаграмме. Для лучшей наглядности показать необходимо относительные значения данных. Например, сколько процентов плана выполнено, сколько товара реализовано, какая часть учеников справилась с заданием, какой процент работников имеют высшее образование и т.д.

Выполнить это не так сложно. Но если не хватает навыков работы в программе Excel, могут возникнуть некоторые затруднения. Рассмотрим подробно, как сделать процентную диаграмму в Excel.

Круговая процентная диаграмма

Построим круговую диаграмму процентного распределения. Для примера возьмем официальную налоговую аналитику «Поступления по типам налогов в консолидированный бюджет Российской Федерации за 2015 год» (информация с сайта ФНС):

Выделим всю таблицу, включая наименования столбцов. На вкладке «Вставка» в группе «Диаграммы» выбираем простую круговую.

Сразу после нажатия по ярлычку выбранного типа на листе появляется диаграмма вида:

Отдельный сегмент круга – доля каждого налога в общей сумме поступлений в консолидированный бюджет в 2015 году.

Теперь покажем на диаграмме процентное соотношение видов налогов. Щелкнем по ней правой кнопкой мыши. В открывшемся диалоговом окне выберем задачу «Добавить подписи данных».

На частях круга появятся значения из второго столбца таблицы:

Еще раз жмем правой кнопкой мыши по диаграмме и выбираем пункт «Формат подписей данных»:

В открывшемся меню в подгруппе «Параметры подписи» нужно снять галочку напротив «Включить в подписи значения» и поставить ее напротив «Включить в подписи доли».

В подгруппе «Число» меняем общий формат на процентный. Убираем десятичные знаки, устанавливаем код формата «0%».

Если нужно отобразить проценты с одним знаком после запятой, в поле «Код формата» ставим «0,0%». С двумя знаками после запятой – «0,00%». И так далее.

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

• «В центре» - подписи отобразятся по центру сегментов;
• «У вершины, внутри» - подписи отобразятся с внутренней стороны окружности;
• «У вершины, снаружи» - подписи покажутся с внешней стороны круга, при выборе параметра сама диаграмма будет несколько меньше, но при наличии мелких данных читаемость улучшается;
• «По ширине» - параметр позволяет Excel установить подписи наиболее оптимально.

Чтобы изменить направление подписей, в подгруппе «Выравнивание» можно воспользоваться инструментом «Направление текста». Здесь же устанавливается угол наклона.

Выберем горизонтальное направление подписей данных и положение «По ширине».

Круговая диаграмма с процентами готова. На диаграмме показано процентное распределение поступлений от налогообложения.



Столбчатая гистограмма

Добавим в таблицу вспомогательные столбцы: 1 – с процентами (процентный вклад каждого вида налога в общее количество); 2 – 100%.

Щелкаем по любой ячейке таблицы. Переходим на вкладку «Вставка». В группе «Диаграммы» выбираем «Нормированную гистограмму с накоплением».

Автоматически созданная диаграмма не решает поставленной задачи. Поэтому на вкладке «Конструктор» в группе «Данные» переходим к пункту «Выбрать данные».

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

Выделяем любой столбец созданной диаграммы. Переходим на вкладку «Макет». В группе «Текущий фрагмент» нажимаем пункт «Формат выделенного фрагмента».

В открывшемся меню переходим на вкладку «Параметры ряда». Устанавливаем значение для перекрытия рядов – 100%.

В итоге проделанной работы получаем диаграмму такого вида:

Общее представление о процентном соотношении видов налога в консолидированном бюджете РФ данная диаграмма дает.

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

В сегодняшнем руководстве я покажу, как можно закруглить углы таблицы, используя только CSS .

Непосредственно разметка (Вторая таблица отличается компоновкой ячеек в верхней строке):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam. eleifend.	Pellentesque cursus, nunc ut facilisis hendrerit

1. Закругляем углы непосредственно у таблицы (тег table).

BContentTables{ border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow:hidden; margin:0.7em auto; }

2. Убираем любой фон у первой строки.

Tr.bCTable_Header {background: none;}

3. При помощи псевдокласса:first-child и комбинатора > выбираем первую ячейку в таблице. Закругляем у первой ячейки левый верхний угол. Фон первой строки складывается из фона ячеек данной строки.

Tr.bCTable_Header:first-child > td:first-child{ border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms-border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; } tr.bCTable_Header td{ color:white; font-size:110%; background-color:#00843C;}

4. При помощи псевдокласса:last-child и комбинатора > выбираем последнюю ячейку в первой строке. Для нее закругляем правый верхний угол.

Tr.bCTable_Header:first-child > td:last-child{ border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms-border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; }

5. У последней строки закругляем нижние углы. Не забудьте удалить фон у последней строки; фон строки задается посредством фона ячеек последней строки.

BContentTables tr:last-child{ border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:none; }

6. Затем по аналогии с пунктами 3-4 в последней строке закругляем углы у первой и крайней ячейки.

BContentTables tr:last-child td{background-color:#F1F1F2;} .bContentTables tr:last-child td:first-child{ border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;} .bContentTables tr:last-child td:last-child {border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border-radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; }

Поддержка браузерами

Читайте также...

• Делаем K-line адаптер своими руками
• Nero Free (Неро) на русском языке Скачать неро для записи аудио
• Что делать если AirDrop не видит iPhone, iPad, Mac?
• Как открыть файлы Pages в Microsoft Word