Почему мой абзац не переносится в мою таблицу?

Для приведенного ниже кода мой абзац делает мою первую колонку (во главе с link1) слишком длинной. Я установил word-wrap в break-word, но, похоже, это не имеет никакого эффекта. Это как-то переписывается?Почему мой абзац не переносится в мою таблицу?

th { 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <title> 
 
    Table Test 
 
    </title> 
 

 
</head> 
 

 
<body> 
 

 
    <table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <th><a href="http://www.google.ca">link1</a> 
 
    </th> 
 
    <th><a href="http://www.last.fm/user/RomeLeader">link2</a> 
 
    </th> 
 
    <th><a href="http://www.wolfparade.com">link3</a> 
 
    </th> 
 
    <th><a href="http://www.sporcle.com">link4</a> 
 
    </th> 
 
    <th><a href="http://www.reddit.com/r/chelseafc">link5</a> 
 
    </th> 
 
    <tr> 
 
     <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
     Home Page 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="para"> 
 
      <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
      </p> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

источник

2016-01-30 Rome_Leader

так, что вы здесь делаете то, что мы привыкли делать еще в 90-х годах, прежде чем мы были действительно в CSS и все. Попробуйте взять верхнее меню из этой таблицы и использовать неупорядоченный список и установить CSS этого списка в «list-style: none», и вы можете использовать поплавки или встроенные блоки или личный фаворит - flexbox :) https: // css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/ – Deryck

Я подозреваю, что проблема является абзацем в div в ячейке таблицы - если не указано иное, div - это элементы блока, а не встроенные элементы.

Я не вижу проблемы с помещением абзаца в ячейку (с классом .para или без него) и просто игнорируя div.

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

источник

2016-01-30 18:35:30

Вы можете явно задать ширину элементов:

th:first-of-type, .para p { 
width: 90px; 
}

полный пример:

th { 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
} 
 

 
th:first-of-type, .para p { 
 
width: 90px; 
 
}

<table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <th><a href="http://www.google.ca">link1</a> 
 
    </th> 
 
    <th><a href="http://www.last.fm/user/RomeLeader">link2</a> 
 
    </th> 
 
    <th><a href="http://www.wolfparade.com">link3</a> 
 
    </th> 
 
    <th><a href="http://www.sporcle.com">link4</a> 
 
    </th> 
 
    <th><a href="http://www.reddit.com/r/chelseafc">link5</a> 
 
    </th> 
 
    <tr> 
 
     <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
     Home Page 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="para"> 
 
      <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
      </p> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table>

источник

2016-01-30 18:28:10 Rounin

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

Вот рабочий пример с неупорядоченного списка:

http://codepen.io/xvariant/pen/adKVgJ

ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 10px; 
 
    font-family: "SansSerif"; 
 
    background-color: yellow; 
 
    text-align: left; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
#table1 { 
 
    border: double; 
 
    border-spacing: 5px; 
 
    table-layout: fixed; 
 
} 
 
.para { 
 
    padding: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    word-wrap: break-word; 
 
}

<ul> 
 
    <li><a href="#">link1</a> 
 
    </li> 
 
    <li><a href="#">link2</a> 
 
    </li> 
 
    <li><a href="#">link3</a> 
 
    </li> 
 
    <li><a href="#">link4</a> 
 
    </li> 
 
</ul> 
 
<table align="center" cellpadding="5px" cellspacing="5px" id="table1"> 
 
    <td align="center" style="color:red; font-size: xx-large" ; colspan="5"> 
 
    Home Page 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="para"> 
 
     <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages 
 
     </p> 
 
     </div> 
 
    </td> 
 
    </tr>

источник

2016-01-30 18:38:35

Почему мой абзац не переносится в мою таблицу?

ответ

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