CSS, изменяющий внешний вид таблицы
У меня на сайте есть таблица, в которой есть столбцы: Пользователь, Название, Описание, Присоединиться, Обновить, Удалить.
Ширина столбца «Пользователь» слишком велика, как и столбец «Заголовок». Мне нужна помощь с CSS, чтобы установить их на что-то меньшее, не влияя на ширину других столбцов, поскольку они идеальны как есть.
Мой код:
<?php
echo "<table>
<tr>
<th>User</th>
<th>Title</th>
<th>Description</th>
<th></th>
<th>Join</th>
<th>Update</th>
<th>Delete</th>
</tr>";
while ($record = mysql_fetch_array($myData))
{
echo "<form action=findGroup.php method=post>";
echo "<div class=joinLink>";
echo "<tr>";
echo "<td>" . "<input type=text name=name value='" . $record['form_user'] . "'/> </td>";
echo "<td>" . "<input type=text name=name value='" . $record['form_name'] . "'/> </td>";
echo "<td>" . "<input type=text name=description value='" . $record['form_description'] . "'/> </td>";
echo "<td>" . "<input type=hidden name=hidden value='" . $record['form_id'] . "'/></td>";
echo "<td><a class=joinLink type=text name=join href='http://localhost:3000'>Join</a></td>";
echo "<td>" . "<input type=submit name=update value='Update" . "'/> </td>";
echo "<td>" . "<input type=submit name=delete value='Delete" . "'/> </td>";
echo "</tr>";
echo "</div>";
echo "</form>";
}
echo "</table>";
CSS:
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica,sans-serif;
text-align: centre;
align: centre;
}
input {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: centre;
align: centre;
height: auto;
overflow: hidden;
}
th {
align: centre;
text-align: centre;
background-color: #4D5960;
color: white;
}
tr {
background-color: #f2f2f2
}
input[type="text"]{
width:100% !important;
line-height:30px;
box-sizing:border-box;
}
a[type="text"]{
width:100% !important;
line-height:30px;
box-sizing:border-box;
}
Решение
Ты можешь использовать ширина свойство фиксировать ширину ваших столбцов. Вы можете применить ширину в HTML напрямую или с помощью CSS
HTML
<td width="20%">content</td>
<th width="20%">content</th>
CSS
.custom-class{
width: 20%;
}
<th class="custom-class"></th>
<td class="custom-class"></td>
Другие решения
Если вы не возражаете, я бы предложил некоторые изменения, см. Ниже. Проверьте, является ли действие формы присоединением, обновлением или удалением для выполнения действия. О структуре данных, которую вы получаете при отправке формы, проверьте var_dump($_POST); часть
PHP:
<?php
var_dump($_POST);
?>
CSS:
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica,sans-serif;
}
input[type="text"] {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
box-sizing: border-box;
padding: 6px 13px;
}
button {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
box-sizing: border-box;
padding: 6px 13px;
}
thead th {
align: center;
text-align: center;
background-color: #4D5960;
color: #ffffff;
}
tbody td {
align: center;
text-align: center;
background-color: #f2f2f2;
}
HTML / PHP:
<form action="index.php" method="POST" enctype="application/x-www-form-urlencoded">
<table>
<thead>
<tr>
<th class="col-name">User</th>
<th class="col-title">Title</th>
<th class="col-description">Description</th>
<th class="col-join">Join</th>
<th class="col-update">Update</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
<?php foreach ([0, 1, 2, 3] as $row) : ?>
<tr>
<td class="col-name">
<input type="hidden" name="user[id][]" value="">
<input type="text" name="user[name][]" value="" size="10">
</td>
<td class="col-title">
<input type="text" name="user[title][]" value="" size="10">
</td>
<td class="col-description">
<input type="text" name="user[description][]" value="" size="10">
</td>
<td class="col-join">
<button type="submit" name="action" value="join">Join</button>
</td>
<td class="col-update">
<button type="submit" name="action" value="update">Update</button>
</td>
<td class="col-delete">
<button type="submit" name="action" value="delete">Delete</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</form>
кажется, что нет проблем, все то же самое
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
align: center;
}
input {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
align: center;
height: auto;
overflow: hidden;
}
th {
align:center;
text-align: center;
background-color: #4D5960;
color: white;
}
tr {background-color: #f2f2f2}
input[type="text"]{width:100% !important; line-height:30px; box-sizing:border-box;}
a[type="text"]{width:100% !important; line-height:30px; box-sizing:border-box;}
https://jsfiddle.net/1qy5v05p/6/
Вы также можете использовать Bootstrap 4, может быть, это будет лучше https://www.w3schools.com/bootstrap4/bootstrap_forms.asp
Существует множество плагинов для таблиц jQuery. Проверьте этот из.
Мои любимые DataTables, x-Editable а также Bootgrid, Есть также открытые источники, вы можете увидеть их с их репозиторием Github.