Преобразование html строки строки строки в CSS

Я проверил некоторые из сообщений здесь о преобразовании из таблицы html в css, но не могу найти то, что я ищу и надеюсь на какую-то помощь.Преобразование html строки строки строки в CSS

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

Я столкнулся с некоторыми проблемами, когда ячейка охватывает несколько строк и не знает, как настроить CSS. Мне нужно увидеть, как это делается статически, прежде чем пытаться генерировать код динамически.

Вот краткий пример:

<table> 
 
    <tr> 
 
     <td id="Td7" rowspan="4" height="100">R0C0</td> 
 
     <td id="Td8" height="25" >R0C1</td> 
 
     <td id="Td9" height="25" >R0C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td10" height="25" >R1C1</td> 
 
     <td id="Td11" height="25" >R1C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td12" height="25" >R2C1</td> 
 
     <td id="Td13" height="25" >R2C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td14" height="25" >R3C1</td> 
 
     <td id="Td15" height="25" >R3C2</td> 
 
    </tr> 
 
</table>

CSS (Покушение), может получить первую строку, но не знаете, как сделать все остальное:

<div> 
 
    <span style="display:inline-block;width:100px;height:100px;border:solid 1px black;vertical-align:top;">R0C0</span> 
 
    <span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C1</span> 
 
    <span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C2</span> 
 
</div>

попытался также Css «стол», с помощью кода в одном из постов here:

<style type="text/css"> 
    .css-table { 
     display: table; 
     background-color:#ccc; 
     width: 350px; 
    } 
.css-table-tr { 
    display: table-row;  
} 

.css-table-td_small { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:25px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_medium { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:50px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_large { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:100px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_kiosk { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:150px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 
</style> 
<div class="css-table"> 
    <div class="css-table-tr"> 
     <span class="css-table-td_kiosk">R0C0</span> 
     <span class="css-table-td_small">R0C1</span> 
     <span class="css-table-td_small">R0C2</span> 
    </div> 
</div>

Edit:

Это таблица (образец) Мне нужно мне нужно преобразовать. Положение и размер шкафчиков будут меняться в зависимости от модели. Если я смогу понять, какая модель будет выглядеть с использованием CSS, я смогу ее обработать, чтобы сделать ее динамичной. L, M и S в скобках подразумевают размер шкафчика. Средняя в 2 раза мала, большая в 4 раза мала, а киоск - в 6 раз меньший размер шкафчика.

<table border="1" style="width:600px"> 
    <tr> 
     <td id="Td1" height="100" >K01D04 (L)</td> 
     <td id="Td2" height="100" >C02D08 (L)</td> 
     <td id="Td3" height="100" >C03D08 (L)</td> 
    </tr> 
    <tr> 
     <td id="Td4" height="25" >K01D03 (S)</td> 
     <td id="Td5" height="25" >C02D07 (S)</td> 
     <td id="Td6" height="25" >C03D07 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td7" rowspan="5" height="150" class="kPL_Kiosk">KIOSK</td> 
     <td id="Td8" height="25" >C02D06 (S)</td> 
     <td id="Td9" height="25" >C03D06(S)</td> 
    </tr> 
    <tr> 
     <td id="Td10" height="25" >C02D05 (S)</td> 
     <td id="Td11" height="25" >C03D05 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td12" height="25" >C02D04 (S)</td> 
     <td id="Td13" height="25" >C03D04 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td14" height="25" >C02D03 (S)</td> 
     <td id="Td15" height="25" >C03D03 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td16" height="50" >C02D02 (M)</td> 
     <td id="Td17" height="50" >C03D02 (M)</td> 
    </tr> 
    <tr> 
     <td id="Td18" height="50" >K01D02 (M)</td> 
     <td id="Td19" rowspan="2" height="100" >C02D01 (L)</td> 
     <td id="Td20" rowspan="2" height="100" >C03D01 (L)</td> 
    </tr> 
    <tr> 
     <td id="Td21" height="50">K01D01 (M)</td> 
    </tr> 
</table>

Спасибо.

Изменить 2:

Изображение ниже показывает, что мне нужно отобразить (один из вариантов). L: большой шкафчик, высота 100 px, M: средний, высота 50 пикселей; S: маленький; высота 25 пикселей. Тем не менее, я, похоже, не могу заставить шкафчики отображаться по столбцам, даже если я указываю flex-direction: column.

Edit 3:

Это CSS и HTML, я использую. Как только я добавил ширину и высоту в направлении сгиба, он начал отображать изображения по столбцам. Я предполагаю, что это недокументированное требование. Однако теперь все отображается в столбце. Это то, что у меня есть:

.lockers { 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap:wrap; 
    flex-wrap:wrap; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    align-items: flex-start; 
} 

.locker-column { 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap:wrap; 
    flex-wrap:wrap; 
    -webkit-align-items: flex-start; 
    align-items: flex-start; 
    height:420px; 
    width:100px; 
} 
img { 
    display: flex; 
    max-width: 100px; 
    height: auto; 
    -webkit-flex-grow:1; 
    flex-grow:1; 
    } 

<div class="lockers"> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C1-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C1-S" /> 
     <img src="..\assets\images\Lockers\Kiosk.png" title="Kiosk" /> 
     <img src="..\assets\images\Lockers\M.png" title="R4C1-M" /> 
     <img src="..\assets\images\Lockers\M.png" title="R5C1-M" /> 
    </div> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C2-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C2-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C4-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C5-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C6-S" /> 
     <img src="..\assets\images\Lockers\M.png" title="R2C7-M" /> 
     <img src="..\assets\images\Lockers\L.png" title="R2C8-L" /> 
    </div> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C3-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R3C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R4C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R5C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R6C3-S" /> 
     <img src="..\assets\images\Lockers\M.png" title="R7C3-M" /> 
     <img src="..\assets\images\Lockers\L.png" title="R8C3-L" /> 
    </div> 
</div>

Редактировать 4:

источник

2016-07-21 NoBullMan

Существует на самом деле 'дисплей: table' Я думаю, что если вы делаете некоторые исследования по этому поводу, то, скорее всего, решить проблему – Huangism

Там нет диапазона строк CSS таблицы – LGSon

Я редактировал вопрос включить дисплей: таблица, которую я уже пробовал. – NoBullMan

Не используйте дисплей: стол. Это то, что вы ищете?

Edit: Разработка

Я не думаю, что вы схватив понятие ..

Я попытаюсь объяснить вам, как вы должны думать об этом. Обычно с таблицами вы думаете о строках, где это может иметь место с flexboxes, когда я писал свое решение, о котором я думал об этом в терминах столбцов.

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

Если у вас нет опыта работы с flexboxes, я рекомендую вам прочитать об этом, но приведенное ниже решение дает вам основную основу того, что вы пытаетесь сделать.

This tutorial является хорошей отправной точкой.

.lockers { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: flex-start; 
 
} 
 

 
.locker-column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    width: 100px; 
 
} 
 
.locker { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 22px; 
 
    text-decoration: underline; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    margin: 2px 0; 
 
    height: 100%; 
 
} 
 

 
.large { 
 
    background-color: yellow; 
 
    color: red; 
 
    height: 100px; 
 
} 
 

 
.small { 
 
    background-color: navy; 
 
    color: white; 
 
    height: 25px; 
 
} 
 

 
.medium { 
 
    background-color: green; 
 
    color: red; 
 
    height: 50px; 
 
} 
 

 
.kiosk { 
 
    color: red; 
 
    text-decoration: none; 
 
    text-transform: lowercase; 
 
    height: 150px; 
 
}

<div class="lockers"> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L11</div> 
 
    <div class="small locker">S21</div> 
 
    <div class="kiosk locker">Kiosk</div> 
 
    <div class="medium locker">M81</div> 
 
    <div class="medium locker">M91</div> 
 
    </div> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L12</div> 
 
    <div class="small locker">S22</div> 
 
    <div class="small locker">S32</div> 
 
    <div class="small locker">S42</div> 
 
    <div class="small locker">S52</div> 
 
    <div class="small locker">S62</div> 
 
    <div class="medium locker">M72</div> 
 
    <div class="large locker">M82</div> 
 
    </div> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L13</div> 
 
    <div class="small locker">S23</div> 
 
    <div class="small locker">S33</div> 
 
    <div class="small locker">S43</div> 
 
    <div class="small locker">S53</div> 
 
    <div class="small locker">S63</div> 
 
    <div class="medium locker">M73</div> 
 
    <div class="large locker">M83</div> 
 
    </div> 
 
</div>

источник

2016-07-21 19:12:08 zsawaf

Спасибо. Это звучит многообещающе, поскольку, когда пользователь выбирает конкретную систему шкафчика (потенциально различное количество шкафчиков и размер шкафчика), у меня будет каждый столбец блокировщиков, хранящихся в отдельной таблице данных в наборе данных (данные, считанные из базы данных).Если это делает то, что я ищу, я должен сгенерировать код, похожий на ваш пример, на лету. Я дам вам знать, как это происходит, когда я читаю на flexboxes. – NoBullMan

Я прочитал и попробовал, и это выглядит хорошо. Единственный вопрос заключается в том, что столбец с гибким направлением не отображает элементы по столбцам (или мне что-то не хватает). Я добавил к вашим изображениям «title = x» (x = 1, 2, 3, ...) и кажется, что они отображаются в строках. Я пробовал разные варианты, и я получаю то же самое. – NoBullMan

Я добавил изображение того, что я ищу. Я не могу заставить шкафчики прокрутки отображаться по столбцам. В вашем примере также добавляются изображения в строке, отличной от столбца (см. Предыдущий комментарий). – NoBullMan

Преобразование html строки строки строки в CSS

ответ

Смежные вопросы