Можно ли установить ширину второго дочернего элемента на самый большой в списке строк? - PullRequest
Новая
       88

Можно ли установить ширину второго дочернего элемента на самый большой в списке строк?

0 голосов
/ 28 октября 2019

Я симулирую гибкую таблицу в гибком столбце и, несмотря на все мои усилия, мне пришлось отказаться от объекта таблицы и использовать только гибкие объекты. http://olivier.lahaye1.free.fr/SystemImager/log_table.html

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

Мне бы хотелосьчтобы сделать это в чистом CSS (я использую HTML5)

Мне бы хотелось, чтобы столбцы 1 и 2 получали наименьшую ширину без переноса содержимого.

Сейчас я использую 8emфиксированная ширина с произвольным. 

header > :not(:last-child), .row > :not(:last-child), footer > :not(:last-child) {
    flex: 0 0 auto;
    width: 8em;
    text-align: center;
}

header > :last-child, .row > :last-child, footer > :last-child {
    flex: 1 1 auto;
    padding-left: 1em;
}
<header>
    <div>Tag</div>
    <div>Priority</div>
    <div>Messages (All logs).</div>
 </header>
 <article id="serverData">
     <div class='row'><div>systemimager</div><div>Warning</div><div>Warning message</div></div>
     <div class='row'><div>kernel</div><div>info</div><div>Loading driver e1000e.</div></div>
     <div class='row'><div>systemimager</div><div>Error</div><div>Imaging of host failed.</div></div>
 </article>

Есть ли способ установить ширину>: от первого ребенка до наибольшего из всех 1-го дочернего элемента заголовка + всех элементов .row? (то же самое для>: nth-child (2))

существует ли синтаксис, допускающий что-то вроде: width: max((header > :first-child, .row > :first-child, .footer > :first-child).width); существует?

1 Ответ

0 голосов
/ 29 октября 2019

Я нашел ответ здесь: https://codepen.io/paulobrien/pen/OjMBZg Хитрость заключается в том, чтобы использовать сетку с классом заголовка для заголовка и придерживаться его позицией: sticky;Затем я адаптировал его под свои нужды, и результат: http://olivier.lahaye1.free.fr/SystemImager/log_table3.html Отлично работает на EDGE и Chrome. Небольшая проблема с изменением размера на сафари (ошибка сафари ИМХО). Если у кого-то есть идея, как сделать так, чтобы высота сафари менялась, когда окно браузера больше, чем требуется, не стесняйтесь писать. 

<html>
<head>
<title>Scrollable table in flex column V3.</title>
<style>
html, body {
    margin: 0;
    padding: 0;
    height:100%;
}

.flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: lightgrey;
}

.wrapper > div {
        background-color: beige;
        color: black;
        border-radius: 5px;
        padding: 0.2em 0.2em;
        font-size: medium;
}
.wrapper {
        flex: 0 1 auto;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 2px;
        background-color: #fff;
        max-height:100%;
        overflow:auto;
}

.wrapper div:nth-child(3n+1), .wrapper div:nth-child(3n+2) {
        text-align: center;
}

.head, .foot {
        position:sticky;
        top:0;
        font-weight: bold;
}
.foot {
        top:auto;
        bottom:0;
}
</style>
</head>
<body>
        <section class="flex">
        <p>
        SystemImager v5.0
        <hr style="width: 100%">
    <div class="wrapper">
        <div class="head">Tag</div>
        <div class="head">Priority</div>
        <div class="head">Messages (All messages including kernel messages and sttout+stderr).</div>
            <div>systemimager</div>
            <div>Info</div>
            <div>Command line: si.image-server=10.0.238.84 si.config=testimage.conf acpi=no noapic ip=11.0.42.15::11.0.42.2:255.255.255.0:oscarnode99:eth0:off dns=8.8.8.8,8.8.4.4 rd.vconsole.keymap=fr-mac vga=791 splash si.debug rd.retry=20</div>
            <div>kernel</div>
            <div>info</div>
            <div>Loading driver e100e.</div>
            <div>script 1</div>
            <div>StdErr</div>
            <div>No such file or directory.</div>
            <div>script 2</div>
            <div>StdOut</div>
            <div>I'm script 2.</div>
            <!-- more lines (multiple of 3 divs) -->
            <div>systemimager</div>
            <div>info</div>
            <div>Giving control back to system.</div>
        <div class="foot">Footer with a lot of text.</div>
        <div class="foot">notice</div>
        <div class="foot">I won't use that in SystemImager, but it is here for demonstration.</div>
    </div> <!-- end wrapper -->
    <div style="flex: 1 1 auto"></div>
    <hr style="width: 100%">
    <span>Status line: A clean solution.</span>
</section>
</body>
</html>
...