Выровняйте цветной div внутри элемента td таблицы начальной загрузки

Можно ли выровнять цветной элемент 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>

Возможно ли что-то вроде предоставленного примера того, что я ищу? Есть ли конкретная вещь в таблице начальной загрузки, которую мне нужно удалить для достижения желаемого результата? Я достаточно хорошо знаю, чтобы начать, так что некоторая помощь будет оценена.

Источник

3 ответа

Решение

Добавленной m-0 класс на div1 с синим цветом. Он был выровнен по центру из-за margin-right: auto;and margin-left: auto; Свойство css для класса контейнера. m-0 удалит любые поля на этом.

<!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 m-0">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container m-0">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>

Источник

Вам не нужно вносить много изменений, просто удалите class="container" из тега div1, это решит проблему.

Источник

Вы просто должны добавить класс float-left к вашему div.

Пожалуйста, следуйте официальной документации Bootstrap для получения дополнительной информации

Вот код:

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;}
<!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>

</head>
<body>

<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 float-left">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container float-left">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>

Источник
Другие вопросы по тегам