0
У меня есть эта досадная проблема, что одна и та же таблица действует по-разному в разных разрешениях. Одна таблица, которая является частью страницы, отлично работает, и все выровнено просто отлично. Тот, который не работает, имеет полную ширину, потому что он предназначен для печати, поэтому он находится на отдельной странице. Проблема возникает в разделах «Навыки и языки», которые ячейки таблицы «lorem ipsum» не выравниваются должным образом с ячейками «хорошие/отличные». Исправлением может быть увеличение размера шрифта класса «entry_data», но я хочу иметь его меньшего размера. Что вы могли бы предложить изменить здесь, чтобы исправить это, пока я хочу, чтобы он работал? :) Благодаря.Таблица не выровнена правильно
HTML код
<table id="cv_table_p">
<tbody>
<tr>
<td class="cv_head" colspan="4">Education</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
</td>
<td colspan="2">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Experience</td>
</tr>
<tr>
<td colspan="4">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
<p>lorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Skills<span>Basic/Good/Excellent</span></td>
</tr>
<tr>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Good</li>
<li>Excellent</li>
<li>Good</li>
<li>Good</li>
<li>Good</li>
<li>Excellent</li>
<li>Excellent</li>
<li>Excellent</li>
</ul>
</td>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Excellent</li>
<li>Excellent</li>
<li>Good</li>
<li>Excellent</li>
<li>Excellent</li>
<li>Basic</li>
<li>Good</li>
<li>Excellent</li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Languages<span>Basic/Good/Fluent</span></td>
</tr>
<tr>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Fluent</li>
<li>Good</li>
<li>Basic</li>
</ul>
</td>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li> </li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Basic</li>
<li>Basic</li>
<li> </li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Awards</td>
</tr>
<tr>
<td colspan="4">
<ul>
<li class="entry_head">lorem ipsumlorem ipsumlorem ipsum</li>
<li class="entry_data">lorem ipsumlorem ipsumlorem ipsumlorem ipsum</li>
<li class="entry_data">lorem ipsumlorem ipsumlorem ipsumlorem ipsum</li>
</ul>
<p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</td>
</tr>
</tbody>
</table>
CSS код
body {
margin:0px;
}
h3 {
margin-top:10px;
}
#cv_table_p {
border-collapse:collapse;
width:100%;
border: 1px solid #DCDCDC;
margin-top:10px;
float:left;
margin-bottom:50px;
}
#cv_table_p td {
width:25%;
padding:0;
border: 1px solid #DCDCDC;
}
#cv_table_p .cv_head {
background:#DCDCDC;
font-size:1.125em;
padding:5px;
}
#cv_table_p .cv_head span{
font-size:0.75em;
float:right;
}
#cv_table_p ul {
list-style:none;
padding:0;
margin:0;
}
#cv_table_p ul li {}
#cv_table_p .entry_head {
background: #EEEEEE;
padding:5px;
}
#cv_table_p .entry_data {
font-size:0.825em;
padding-left:5px;
color:#4D4D4D;
padding:3px 3px 3px 5px;
}
#cv_table_p p {
line-height:150%;
padding:0 5px 0 5px;
font-size:0.9375em;
}
Основная проблема заключается в том, что вы пытаетесь использовать таблицы для разметки. Не. У вас есть заголовки и списки. – Quentin
Что значит? если вы имеете в виду весь макет сайта, то нет. im, используя div, чтобы разделить содержимое моего сайта. эта часть представляет собой только таблицу биографических данных, которую проще управлять с помощью таблицы. – Stein
Я должен согласиться с @Quentin. Таблицы должны использоваться только для отображения данных. Содержимое CV, которое вы показываете, может быть легко выложено с помощью div, разделов, uls и т. Д. Может быть проще управлять тем, как вы это делаете, но это не значит, что это правильно. –