Как удалить пробелы в конце таблицы flexbox без использования JS?

Question

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

Вот таблица

Как вы видите, в конце каждого ряда много пробелов, я хочу их уменьшить. Мой нынешний подход

.flex-table-row-item:last-of-type {
    flex: 0;
}

, что приводит к сокращению последней ячейки (.flex-table-row-item) в каждой строке (.flex-table-row) до размера содержимого. Но это приводит к тому, что каждая строка сокращает последний столбец независимо от других строк, и вызывает большое смещение .

Вот соответствующий код:

CSS

.flex-table-label {
    font-size: 1.3em;
    margin: 1em 0;
    padding: 8px 12px;
}

.flex-table {
    display: flex;
    margin-right: 20px;
    margin-bottom: 40px;
    flex-flow: column nowrap;
    justify-content: space-between;
    border: 1px solid #dfdfdf;
    background-color: #ffffff;
}

.flex-table-row {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.flex-table-row:nth-of-type(even) {
    background-color: #f9f9f9;
}

.flex-table-row-item {
    padding: 8px 10px;
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    padding: 0.5em;
    word-break: break-word;
    white-space: nowrap;
}

/* .flex-table-row-item:last-of-type {
    flex: 0;
} */

.flex-table-header {
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.flex-table-row-name-link {
    font-weight: 600;
}

.flex-table-row-checkbox {
    padding: 0 3px;
    flex-grow: 0;
    align-items: center;
}

.flex-table-row-checkbox input {
    margin: 0 0 0 8px!important;
}

.flex-table-row-name img {
    margin: 1px 10px 0 0;
    height: 32px;
    width: 32px;
}

Оболочка стола (PHP)

<div class="flex-table">
    <h2 class="flex-table-label">Small Profiles</h2>
    <div class="flex-table-row flex-table-header">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item"><a>Name</a></div>
        <div class="flex-table-row-item">Title</div>
        <div class="flex-table-row-item">Rearrange</div>
    </div>
    <?php
    // Fetch data from database to put into table
    $statement = $db->prepare("SELECT * FROM `".TEAM_DB."` WHERE 
       `enlarge`=0 ORDER BY `list_order`");

    $statement->execute();
    $statement->setFetchMode(PDO::FETCH_ASSOC);
    while ( $row = $statement->fetch() ) {
        // generate_profile_list_item() creates a row in the table.
        // Called for each entry in database.
        // See below for function
        echo generate_profile_list_item($row['name'],$row['title'],$row['imgsrc'],$row['position']);
    }
    ?>
    <div class="flex-table-row flex-table-header">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item"><a>Name</a></div>
        <div class="flex-table-row-item">Title</div>
        <div class="flex-table-row-item">Rearrange</div>
    </div>
</div>

Функция, которая собирает строку таблицы (PHP)

function generate_profile_list_item($name, $title, $imgsrc, $pos)
{
    ob_start();
?>
    <div class="flex-table-row">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item flex-table-row-name">
            <img src="<?php echo "../../".$imgsrc ?>" />
            <a class="flex-table-row-name-link"><?php echo $name ?></a>
        </div>
        <div class="flex-table-row-item flex-table-row-title"><?php echo parse_title($title,3) ?></div>
        <div class="flex-table-row-item flex-table-row-rearrange">
            <i class="material-icons">keyboard_arrow_up</i>
            <i class="material-icons">keyboard_arrow_down</i>
        </div>
    </div>

<?php
    return ob_get_clean();
}

Это было бы довольно легко сделать в JQuery, но я надеялся, что это можно решить с помощью чистого CSS.

Answer 1

Вы можете использовать https://developer.mozilla.org/en-US/docs/Web/CSS/white-space селектор пробела white-space: pre-line; на элементе.