Я временно унаследовал ответственность за внешний вид веб-сайта нашего проекта, так как наш веб-администратор только что ушел и замены пока нет (и я все равно учусь на летних курсах, так что я ухожу) скоро тоже ...). Я не очень разбираюсь в HTML / CSS / и т. Д., И у меня возникают некоторые проблемы с форматированием таблицы в соответствии с пожеланиями боссов. Таблица HTML / CSS (сокращена настолько, насколько я думаю, что я могу) выглядит следующим образом:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Текст в таблице (то есть текст ячеек заголовка и текст стандартных ячеек) генерируется на стороне сервера на основе базы данных, поэтому значения в них могут быть довольно длинными или довольно короткими (с приемлемой максимальной длиной) ). Боссы хотят это следующим образом:
- Два столбца должны быть выровнены друг против друга посередине, с небольшим промежутком между ними.
- Таблица должна развернуться, чтобы весь текст в каждой ячейке находился в одной строке.
- Заголовок («Детали») всегда должен быть центрирован между двумя столбцами, независимо от того, каково соотношение ширины (так как обычно они составляют около 60:40).
Я думаю, что мне удалось захватить 1 и 2 в порядке - эта таблица должна расшириться, если вы добавите более длинные th/td с, и она также должна уменьшиться, если вы удалите их - но я борюсь с номером 3. Я Я просто не уверен, как это сделать вообще. Я попытался использовать <caption>, но это не помогло - оно по-прежнему центрировано над всей таблицей, а не по центру столбца.
Итак, я был бы признателен за любую помощь, чтобы стол выглядел «правильно». Единственный ожидаемый браузер, по-видимому, это Firefox, версии 2–3,5 (хотя в большинстве случаев это 3.5 и 2). Я прошу прощения, если я пропустил какую-либо важную информацию - просто спросите, и я добавлю ее.
EDIT:
Снимок экрана (красные линии только для обозначения центра, а не для таблицы IRL):
