Разделить ячейку таблицы по вертикали - PullRequest
Новая
       17

Разделить ячейку таблицы по вертикали

1 голос
/ 23 июня 2010

У меня есть HTML-таблица, в которой некоторые ячейки имеют динамическое содержимое, которое со временем будет менять высоту. Допустим, я хочу, чтобы одна ячейка заполнила нижнюю половину одним цветом, а верхнюю - другим цветом. Я хотел бы сделать это с помощью HTML / CSS, чтобы при изменении высоты других ячеек цветовая ячейка по-прежнему корректировалась наполовину (т.е. каждый цвет занимает половину новой высоты).

Я пробовал варианты следующего кода. Если обе высоты 50%, то я вижу только две цветные точки. Если обе высоты равны 50px, то A) я не думаю, что он будет корректироваться, и B) он слишком высок для текущего соседа. 

<table border="1">
<tr>
  <td>1<br />2</td>
  <td>
    <table border="1">
      <tr>
        <td style="background-color: Blue; height: 50%" />
      </tr>   
      <tr>
        <td style="background-color: Red; height: 50px" />
      </tr>
    </table>
  </td>
</tr>
</table>

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

Ответы [ 5 ]

5 голосов
/ 23 июня 2010

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

<table border="1" style="height:100px">
<tr>
 <td rowspan="2">1<br />2</td>
 <td style="background-color: Blue; height: 50%" />   
</tr>
<tr>
 <td style="background-color: Red; height: 50%" />
</tr>
</table>
3 голосов
/ 23 июня 2010

Вы можете использовать все виды дополнительной разметки для спагетти или добавить один класс к вашей таблице, например так: 

<table class="FunkifyMyBackgounds">
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>


и использовать очень простой jQuery javascript: 

<script type="text/javascript">
function SetAllSpecialCellBackgrounds (bNeedToCreateStructure) {
  var zCellsToBackgroundify         = $(".FunkifyMyBackgounds td");

  //--- Set each cell's funky background.
  zCellsToBackgroundify.each (function (idx) {
    SetA_SpecialCellBackground ($(this), idx, bNeedToCreateStructure);
  } );
}

function SetA_SpecialCellBackground (zJnode, K, bNeedToCreateStructure) {
  if (bNeedToCreateStructure) {
    //--- Add our special background structure.
    var sIdName                 = 'idSpecialCellBG_Container' + K;

    zJnode.append (
      '<div id="' + sIdName + '" class="SplitCellBackground">'
      +  '<div class="TopOfCell">&nbsp;<\/div><div class="BottomOfCell">'
      + '&nbsp;<\/div><\/div>'
    );
  }

  ResizeA_SpecialCellBackground (zJnode);
}

function ResizeA_SpecialCellBackground (zJnode) {
  var zCellBG_Frame             = zJnode.find ('div.SplitCellBackground');

  //--- Set the background container to match the cell dimensions.
  zCellBG_Frame[0].style.width  = zJnode.outerWidth  (false) + 'px';
  zCellBG_Frame[0].style.height = zJnode.outerHeight (false) + 'px';

  //--- Position absolutely; Adjust for margin, if needed.
  var aContentPos             = zJnode.offset ();

  //--- Redundant for IE. Tested and IE really seems to need it.
  zCellBG_Frame[0].style.top    = aContentPos.top  + 'px';
  zCellBG_Frame[0].style.left   = aContentPos.left + 'px';

  zCellBG_Frame.offset (aContentPos);
}

$(document).ready ( function () {
    SetAllSpecialCellBackgrounds (true);

    /*--- Globally catch table cell resizes caused by the browser window
      change.
      A cross-browser, good-enough solution is just to use a timer.
      Keep it just under a second per usability guidelines.
    */
    $(window).resize (function() {SetAllSpecialCellBackgrounds (false);} );
    setInterval (function() {SetAllSpecialCellBackgrounds (false);}, 444);
} );
</script>


Требуется CSS: 

/***** Start of split-cell, specific styles. ****
*/
.SplitCellBackground, .TopOfCell, .BottomOfCell {
    margin:             0;
    padding:            0;
    width:              100%;
    height:             50%;
    z-index:            -10;
}
.SplitCellBackground {
    position:           absolute;
    width:              10em;
    height:             10em;
}
.TopOfCell {
    background:         #33FF33;
}
.BottomOfCell {
    background:         #FF33FF;
}
/***** End of split-cell, specific styles. *****/


Вы можете увидеть полный код в действии на jsBin .

Работает со всеми основными браузерами, но не с IE6.

1 голос
/ 23 июня 2010

Я полагаю, у вас возникли трудности, потому что вы смешиваете структуру и макет. Вы должны использовать CSS для верстки. Вы должны оставить внутреннюю таблицу и использовать некоторые div.

Я рекомендую вам создать HTML-документ и скопировать / вставить код следующих примеров из примера кода. На данный момент у меня нет IE, поэтому я не смог протестировать образец с этим браузером.

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

.html 

<!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" />
    <title>Test</title>
    <style type="text/css">
        body, html 
        {
            margin:0;
            padding:0;
            color:#000;
            background: #333;
        }

        h2
        {
            color: #FFF;
            font-weight: bold;
        }

        p
        {
            font-size: 16px;
            color: #FFF;
        }

        #example1
        {
            position: relative;
            margin: 0 auto;
            background: #06F;
            width: 600px;
            min-height: 550px;
            height: auto;
            padding: 10px;
            margin-bottom: 10px;
            overflow: auto;
        }

        #example2
        {
            position: relative;
            margin: 0 auto;
            background: #06F;
            width: 600px;
            min-height: 550px;
            height: auto;
            padding: 10px;
            overflow: auto;
        }

        #table1 td
        {
            height: 400px;
            display: block;
            float: left;
            width: 250px;
        }

        .content
        {
            position: relative;
            margin: 0 auto;
        }

        .table1
        {
            width: auto;
        }

        .column
        {
            position: relative;
            height: 400px;
            width: 250px;
            float: left;
            margin-left: 2px;
        }

        .cell
        {
            position: relative;
            height: 100%;
            border:solid 1px #F00;
        }

        .top_cell
        {
            position: relative;
            height: 50%;
            padding: 5px;
            background: #0FF;
            overflow: auto;
        }

        .bottom_cell
        {
            position: relative;
            height: 50%;
            padding: 5px;
            background: #C9F;
            overflow: auto;
        }


    </style>
</head>

<body>
    <div class="content">

        <div id="example1">
            <h2> Example 1: </h2>
            <p>
                This example is made only with CSS...
            </p>

            <div class="table1">
                <div class="column">
                    <div class="cell">
                        <div class="top_cell">
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                            <p>Test 1 Top</p>
                        </div>
                        <div class="bottom_cell">
                            <p>Test 1 Bottom</p>
                            <p>Test 1 Bottom</p>
                            <p>Test 1 Bottom</p>
                            <p>Test 1 Bottom</p>
                            <p>Test 1 Bottom</p>
                        </div>
                    </div>
                </div>

                <div class="column">
                    <div class="cell">
                        <div class="top_cell">
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                            <p>Test 2 Top</p>
                        </div>
                        <div class="bottom_cell">
                            <p>Test 2 Bottom</p>
                            <p>Test 2 Bottom</p>
                            <p>Test 2 Bottom</p>
                            <p>Test 2 Bottom</p>
                            <p>Test 2 Bottom</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="example2">
            <h2> Example 2: </h2>
             <p>
                This example is made with a HTML table and some CSS...
            </p>
            <table id="table1">
                <tr>
                    <td>
                        <div class="cell">
                            <div class="top_cell">
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                                <p>Test 1 Top</p>
                            </div>
                            <div class="bottom_cell">
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                                <p>Test 1 Bottom</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="cell">
                            <div class="top_cell">
                                <p>Test 2 Top</p>
                                <p>Test 2 Top</p>
                                <p>Test 2 Top</p>
                                <p>Test 2 Top</p>
                            </div>
                            <div class="bottom_cell">
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                                <p>Test 2 Bottom</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Протестировано в Safari 5 и Firefox 3 в Mac OS X (Snow Leopard).

1 голос
/ 23 июня 2010

Почему бы не использовать простой HTML и ключевое слово <rowspan>? Мне кажется, это самый простой подход.

Используйте <TD ROWSPAN="2"> для ячейки, которую вы хотите разделить. Затем вы можете использовать стандартную раскраску HTML / CSS для этих двух ячеек? Так как каждая из них является просто стандартной ячейкой таблицы, вы можете изменить их границы и т. Д.

Есть пример на http://www.tedmontgomery.com/tutorial/tblxmpls.html

0 голосов
/ 23 июня 2010

Я перечитал вопрос и понял, что допустил большую ошибку в реализации своего ответа. Я бы предложил использовать div, как говорит Энди, но я поддерживаю javascript и css. Я не вижу очевидного способа реализации динамических высот для div или таблиц без назначения идентификаторов и манипулирования высотами, которые генерируются и возвращаются браузером. Div-ы и таблицы работают по какой-то причине. 

<script type="text/javascript">
    /* FUNCTION: resizeTable
     * DESCRIPTION: Resizes table_id so that it is twice the height of the larger
          cell. The objective is to have two equally tall rows.
     * EXAMPLE: <body onload="resizeTable();">
     */
    function resizeTable() {
        // get the dom elements of the table and cells
        var table = document.getElementById("table");
        var cell = document.getElementById("cell");
        var diva = document.getElementById("div1");
        var div4 = document.getElementById("div2");

        // determine margin
        var margin = ( table.offsetHeight - cell.offsetHeight );

        // set the div's height to 1 larger than the cells to ensure it is full
        diva.style.height = ( ( cell.offsetHeight - ( margin / 2 ) ) / 2 ) + "px";
        div4.style.height = ( ( cell.offsetHeight - ( margin / 2 ) ) / 2 + 1 ) + "px";
    }

    // add onload event
    window.onload = function() { resizeTable(); }
</script>

<table id="table" border="1" style="border-collapse: collapse;">
    <tr>
      <td id="cell">1<br />2a<br />a</font></td>
      <td style="padding: 0px;">
        <div id="div1" style="width: 5px; background: blue;">
            &nbsp;
        </div>
        <div id="div2" style="width: 5px; background: red;">
            &nbsp;
        </div>
      </td>
    </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...