Colspan + Равная ширина ячейки после удаления нескольких столбцов - PullRequest
3 голосов
/ 03 февраля 2012

PS.Я предпочитаю решить эту проблему с помощью CSS, если это возможно, но если нет возможности, у меня также есть доступ к JQuery (но нет другой библиотеки).

ОК, это расширение myпредыдущий вопрос .Когда я задавал этот вопрос, я пытался сделать сценарий максимально простым.Но кажется, что colspans в моей таблице создают проблему.У меня есть таблица с 8 столбцами.Во время выполнения любое количество этих элементов удаляется.В моей таблице несколько строк с colspan="8".Используя table-layout:fixed;, я делаю ячейки одинаковой ширины.Проблема в том, что ячейка с colspan="8" не изменяется.Это изображение показывает, что у меня есть и что я хочу:

enter image description here

А вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
    width:600px;
    table-layout:fixed;
}
table td{
    border:1px solid red;
    text-align:center;
    background-color:#9CF;
}
table td:only-child{
    background-color:#CCFFFF;
}
caption{
    color:blue;
    font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
    <caption>Original table</caption>
    <tr>
        <td colspan="8">Cell with colspan=8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    <tr>
</table>
<table>
    <caption>After some columns are removed</caption>
    <tr>
        <td colspan="8">Cell with colspan=8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>7</td>
        <td>8</td>
    <tr>
</table>
<table>
    <caption>I want these to have the same width</caption>
    <tr>
        <td colspan="8">Cell with colspan=8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Two</td>
        <td>Three</td>
        <td>Column number four</td>
        <td>5</td>
    <tr>
</table>
<table>
    <caption>I want these to have the same width, too</caption>
    <tr>
        <td colspan="8">Cell with colspan=8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Column number four</td>
        <td>5</td>
    <tr>
</table>
</body>
</html>

1 Ответ

1 голос
/ 03 февраля 2012

РЕДАКТИРОВАТЬ 1: не читал предыдущий связанный вопрос.
РЕДАКТИРОВАТЬ 2: Я исправил это, теперь все должно работать хорошо.

Я попытался немного подправить его, и я думаю, что получил желаемый результат. Теперь вам нужно настроить размер td.

Jsfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...