Форум Сайтостроение Веб-строительство

помогите с рамкой таблицы

Fate
На сайте с 02.08.2006
Offline
30
Fate
538

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

gif pic.gif
Василий Ткачев
На сайте с 19.05.2005
Offline
481
Василий Ткачев
#1

при помощи цсс :)

.1 {border-right: 1px solid #000;border-bottom: 1px solid #000;}

.right {border-bottom: 1px solid #000;}

.bottom {border-right: 1px solid #000;}

можно и проще

проапил

работает везде

или вам не намек а полный код таблицы? :)

Продвигаем естественно ( http://www.inetessentials.ru/ ) и непринужденно. Практический курс по оптимизации ( https://allintop.ru/optimization/ ) - без воды и на основе сайтов студентов. Ежегодная конференция All in Top Conf (https://www.allintopconf.ru/)
Fate
На сайте с 02.08.2006
Offline
30
Fate
#2

это понятно при помощи чего. желательно пример :( у меня работает только в IE :(

Николай В.
На сайте с 07.09.2006
Offline
62
Николай В.
#3

Наименование класса «1» измените на что-нибудь типа «common» и заработает везде. 


<style>

table { border-collapse: collapse; }

td.common { border-right: 1px solid #000; border-bottom: 1px solid #000; }

td.right { border-bottom: 1px solid #000; }

td.bottom { border-right: 1px solid #000; }

</style>



<table>

	<tr>

		<td class="common">        </td>

		<td class="common">        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="common">        </td>

		<td class="common">        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="bottom">        </td>

		<td class="bottom">        </td>

		<td>        </td>

	</tr>

</table>

Хотя экономней вот так сделать: 

<style>

table { border-collapse: collapse; }

td { border-right: 1px solid #000; border-bottom: 1px solid #000; }

td.right { border: none; border-bottom: 1px solid #000; }

td.bottom { border: none; border-right: 1px solid #000; }

td.none { border: none; }

</style>



<table>

	<tr>

		<td>        </td>

		<td>        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td>        </td>

		<td>        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="bottom">        </td>

		<td class="bottom">        </td>

		<td class="none">        </td>

	</tr>

</table>
Василий Ткачев
На сайте с 19.05.2005
Offline
481
Василий Ткачев
#4
Николай В.:
Наименование класса «1» измените на что-нибудь типа «common» и заработает везде. 


<style>

table { border-collapse: collapse; }

td.common { border-right: 1px solid #000; border-bottom: 1px solid #000; }

td.right { border-bottom: 1px solid #000; }

td.bottom { border-right: 1px solid #000; }

</style>



<table>

	<tr>

		<td class="common">        </td>

		<td class="common">        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="common">        </td>

		<td class="common">        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="bottom">        </td>

		<td class="bottom">        </td>

		<td>        </td>

	</tr>

</table>


Хотя экономней вот так сделать: 

<style>

table { border-collapse: collapse; }

td { border-right: 1px solid #000; border-bottom: 1px solid #000; }

td.right { border: none; border-bottom: 1px solid #000; }

td.bottom { border: none; border-right: 1px solid #000; }

td.none { border: none; }

</style>



<table>

	<tr>

		<td>        </td>

		<td>        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td>        </td>

		<td>        </td>

		<td class="right">        </td>

	</tr>

	<tr>

		<td class="bottom">        </td>

		<td class="bottom">        </td>

		<td class="none">        </td>

	</tr>

</table>

хыхы.. мне лень писать было :)))

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