Как установить кнопки CSS в ячейки таблицы?

Вопрос:

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

Есть ли способ вставить кнопки в ячейки таблицы?

HTML:

<center>

<table border="1" width="90%" class="buttons">
<tr>
<td width="25%"><a href="http://www.google.com">Link1 goes here</a></td>
<td width="25%"><a href="http://www.google.com">Link2<br>goes<br>here</a></td>
<td width="25%"><a href="http://www.google.com">Link3<br>goes<br>here</a></td>
<td width="25%"><a href="http://www.google.com">Link4<br>goes<br>here</a></td>
</tr>
</table>

<p>

<table border="1" width="90%" class="buttons">
<tr>
<td width="20%"><a href="http://www.google.com">Link1 goes here</a></td>
<td width="20%"><a href="http://www.google.com">Link2<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link3<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link4<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link5<br>goes<br>here</a></td>
</table>

</center>

CSS:

.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;

}

.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}

.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}

Играйте с кодом: http://codepen.io/anon/pen/bIEtC

Лучший ответ:

Вы должны попытаться установить высоту и ширину 100%. Как это:

.buttons a
{
   display: inline-block;
   width: 100%;       /* set to 100% */
   height: 100%;      /* set to 100% */
   margin-bottom: 0.5em;
   padding-top: .6em;
   padding-bottom: .6em;
   color: #fff;
   background-color: #aaabbb;
   border-radius: 5px;
   border: solid #cccccc 1px;
   box-shadow: 2px 2px 1px #888888;
   clear:right;
   float:right;
}

Ответ №1

Старайтесь не вставлять CSS код в HTML… это приводит к беспорядку!

Принимая встроенный стиль из html, кажется, устраняет большинство проблем. Затем, как и @ArmanVirdi, добавьте ширину и высоту ссылки на 100%.

Теги <center>, похоже, ничего не делают, поэтому они удаляются в нижнем HTML, а также тег <p>.

HTML

<table class="buttons width-25">
<tr>
<td><a href="http://www.google.com">Link1 goes here</a>

</td>
<td><a href="http://www.google.com">Link2<br>goes<br>here</a>

</td>
<td><a href="http://www.google.com">Link3<br>goes<br>here</a>

</td>
<td><a href="http://www.google.com">Link4<br>goes<br>here</a>

</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td><a href="http://www.google.com">Link1 goes here</a>

</td>
<td><a href="http://www.google.com">Link2<br>goes<br>here</a>

</td>
<td><a href="http://www.google.com">Link3<br>goes<br>here</a>

</td>
<td><a href="http://www.google.com">Link4<br>goes<br>here</a>

</td>
<td><a href="http://www.google.com">Link5<br>goes<br>here</a>

</td>
</table>

CSS

table {
width: 100%;
}

.width-20 td {
width: 20%;
}

.width-25 td {
width: 25%;
}

.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}

JSFiddle для справки

Ответ №2

Добавить в .buttons:

width:0;

Resut:

enter image description here

Оцените статью
TechArks.Ru
Добавить комментарий