Можно ли выровнять цветной элемент div внутри элемента td таблицы начальной загрузки?Я могу сделать это с обычной таблицей без начальной загрузки, но, похоже, у таблицы начальной загрузки есть проблема с выравниванием цветного div по сторонам.
Что у меня есть:
Что происходит без начальной загрузки:
Что я хочу
Мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<style>
table td:last-child {
border-left: 1px solid #bababa;
padding: 0px;
}
table tr:last-child td:last-child {
border-bottom: 1px solid #bababa;
}
body {
background-color: #2c3034;
}
</style>
</head>
<body>
<br />
<div class="container">
<table class="table table-dark table-striped table-hover">
<thead>
<tr>
<th>Year</th>
<th>Data for Town</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10%">2012</td>
<td>
<div id="div1" style="background:#229ac1; width:30%;" class="container">jfiljfrei</div>
<div id="div2" style="background:#FF0000;" class="container">jfiljfrei</div>
</td>
</tr>
<tr>
<td>2014</td>
<td>Minus</td>
</tr>
<tr>
<td>2013</td>
<td bgcolor="#FF0000"></td>
</tr>
<tr>
<td>2014</td>
<td>Minus</td>
</tr>
<tr>
<td>2014</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Возможно ли что-то вроде приведенного примера того, что я ищу?Есть ли конкретная вещь в таблице начальной загрузки, которую мне нужно удалить для достижения желаемого результата?Я достаточно хорошо знаю, чтобы начать, поэтому некоторая помощь будет оценена.