У меня странная проблема с форматированием. У меня есть приложение MVC, которое использует Bootstrap 4. Когда я указываю ширину таблицы с помощью атрибута style="width:xx%" в объявлении, цвет фона строки заголовка распространяется только на часть таблицы. Если я не укажу ширину, цвет фона работает отлично. Я приложил фрагмент, который отображает пример таблицы, использующей автоматическую ширину, и таблицы, в которой я установил ширину на 70%.
Контейнер - это «input-group содержимого контейнера». -sm». _Layout.cs html включает в себя следующие теги стилей, хотя в этом примере я ссылаюсь только на стиль table mytable, как вы увидите в исходном представлении ниже.
body {
padding-top: 5px;
margin-left: 10px;
font-size: 14px;
}
tr {
line-height: 10px;
min-height: 10px;
height: 10px;
/*padding: 0 !important;*/
}
td {
padding: 5px;
}
.table th,
.table td {
padding: 5px 8px;
}
.mytable>tbody>tr>td,
.mytable>tbody>tr>th,
.mytable>tfoot>tr>td,
.mytable>tfoot>tr>th,
.mytable>thead>tr>td,
.mytable>thead>tr>th {
padding: 4px;
}
.mytable {
margin-bottom: 2px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: rgb(204, 204, 204);
display: inline-block;
margin-right: 2px;
width: auto;
margin-left: 15px;
}
.mytable caption {
caption-side: top;
background-color: #f5f5f5;
color: #333;
padding: 10px 15px;
font-size: 16px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-color: rgb( 204, 204, 204);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div style="white-space:nowrap">
<h4>Test Page</h4>
<table class="table mytable">
<caption>My Caption - Table 1</caption>
<tr>
<th style="width:30%">Heading 1:</th>
<td>
Row 1
</td>
</tr>
<tr>
<th>Heading 2:</th>
<td>
Row 2
</td>
</tr>
</table>
<br />
<br />
<table class="table mytable" style="width:70%">
<caption>My Caption - Table 2</caption>
<tr>
<th style="width:30%">Heading 3:</th>
<td>
Row 3
</td>
</tr>
<tr>
<th>Heading 4:</th>
<td>
Row 4
</td>
</tr>
</table>
</div>
Я абсолютно не специалист по таблицам стилей, поэтому, если это новый уровень ie, прошу прощения. Я немного погуглил, чтобы попытаться понять это, но оказался пустым. Любые намеки на то, почему это происходит, и предложения о том, как это исправить, будут наиболее цениться. Спасибо!
