Таблица HTML + CSS с разными столбцами размера?

layout I am trying to achieve Я хотел бы бар категории на стороне, и все основное содержание в правом окне. Прямо сейчас я пытаюсь сделать это со столами, и это сложно. Есть ли какие-нибудь полезные функции CSS, которые я должен использовать?

Edit: К сожалению, вот текущий код:

<body> 
<img src="xxx"> 

<table width="100%" border=1> 
    <col width="30%"> 
    <col width="70%"> 

    <tr> 
     <th id="row1"> 
      Categories 
     </th> 
     <th id="row1"> 
      Main Content 
     </th> 
    </tr> 

    </div> 


    <tr> 
     <th> 
      Category Header 
     </th> 
     <td id="main-content"> 
      45645 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <li> 
      Category Entry 
      </li> 
     </td> 
    </tr> 

</table>

И мои текущие таблицы стили:

li { 
list-style-type: none; 
} 

#row1 { 
color: ; 
} 

#main-content { 
padding: 9999999; 
margin-bottom: 9999999; 
}

источник

2017-01-06 Chase

Лучше использовать DIV .. чем таблица для макета – Victoria

Что-то вроде этого?

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    margin-bottom: 5%; 
 
    background: red; 
 
    padding: 2%; 
 
} 
 

 
aside { 
 
    clear: left; 
 
    float: left; 
 
    width: 28%; 
 
    margin-right: 2%; 
 
    padding: 2%; 
 
    background: blue; 
 
} 
 

 
main { 
 
    float: left; 
 
    width: 68%; 
 
    margin-left: 2%; 
 
    padding: 2%; 
 
    background: green; 
 
}

<body> 
 
    <header>This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. </header> 
 
    <aside>This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. 
 
    This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. </aside> 
 
    <main>This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main 
 
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This 
 
    is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. 
 
    This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main 
 
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This 
 
    is the main content. This is the main content. This is the main content. This is the main content. </main> 
 
</body>

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

источник

2017-01-06 00:27:14

Это классно. Я пытаюсь настроить его для своего магазина ebay, поэтому отзывчивый дизайн идеален. Я не совсем уверен, как ebay примет специальный синтаксис, например,

Как сказал Стивен П, теги не являются «специальным синтаксисом». И да, вы можете использовать '<в стороне id =" в сторону1 ">' или <в сторону class = "в стороне1"> –

Лучше всего его использовать colspan=2 для первой строки td's и положить DIV внутри первого td второго ряда с height="80%":

<table style="height: 200px; width: 200px;"> 
 
    <colgroup> 
 
    <col width="30%"> 
 
    <col width="70%"> 
 
    </colgroup> 
 
     <tr> 
 
     <td style="border: 1px solid black; height: 20px;" colspan="2">First row</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="border: none; padding: 0; margin: 0; vertical-align: top;"> 
 
      <div style="height: 80%; border: 1px solid black; margin-top: 0; padding-top: 20px;"> Test <div> 
 
     </td> 
 
     <td style="border: 1px solid black">$100</td> 
 
     </tr> 
 
    </table>

источник

2017-01-06 00:30:42 Yaser

Это именно то, что мне нужно! Однако, как бы сделать текст во втором столбце обертыванием? Я хотел бы написать абзацы там и даже добавить некоторые изображения. – Chase

вы можете использовать 'word-wrap: break-word;' или 'white-space: pre-wrap' – Yaser

@Chase - так как вы учитесь, учитесь использовать правильные теги и CSS для их стиля - do ** not ** используйте таблицу для планирования, как вы хотите, чтобы ваша страница выглядела. поэтому 1995. –

Вы можете использовать HTML5 семантические в качестве заголовка , в сторону или main и CSS Flexbox. Попробуйте этот фрагмент:

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
header { 
 
    flex: 0 1 100%; 
 
    background: red; 
 
} 
 
aside { 
 
    flex: 1 0 25%; 
 
    background: green; 
 
} 
 
main { 
 
    flex: 1 0 75%; 
 
    background: blue; 
 
}

<body> 
 
    <header>Header content</header> 
 
    <aside>Aside content</aside> 
 
    <main>Main content</main> 
 
</body>

источник

2017-01-06 00:37:24 mdck

Я предлагаю вам с помощью дивы с CSS, Не похоже, право использовать таблицу в таком случае.

Если вы новичок на все HTML и CSS вещи попробовать Bootstrap

Супер легкий и заранее сделал CSS. Вы можете увидеть примеры и следовать простым учебникам.

источник

2017-01-06 00:42:03 EvilNabster

Таблица HTML + CSS с разными столбцами размера?

ответ

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