只能看到垂直线的表格

Question

我需要一种方法来只显示表格中的垂直线。

我尝试将border-left和border-right添加到表格和单独的td中：1px solid #red;。但它不会添加边框颜色。

所以我正在寻找的是创建这些垂直线的简单方法。

Answer 1

在<table>上使用边框折叠，而不是<td>上的 border-left 和 border-right

＆＃13;

＆＃13;

table { border-collapse: collapse; }
tr { border: none; }
td {
  border-right: solid 1px #f00; 
  border-left: solid 1px #f00;
}

＆＃13;

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于那些想要在表格中但却没有不同列的垂直线条的人来说，西蒙的答案进行了解释。注意：您必须完全按照答案中的说明进行操作。表格本身需要边框折叠：折叠或多行显示，tr需要border：none或轮廓将显示，td border-left / right / top / bottom部分显而易见。

$(function () {
    $.ajaxSetup({ cache: false });

    $(document).on("click", ".modal-link", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal
                (
                {
                    keyboard: true
                }, 'show'
                );

            bindForm(this);
        });
        return false;
    });

    $(document).on("click", "a[data-modal]", function (e)
    {
        $('#myModalContent').load(this.href, function ()
        {
            $('#myModal').modal
            (
                {
                  keyboard: true
                }, 'show'
            );

            bindForm(this);
        });
        return false;
    });

    $(window.document).on('shown.bs.modal', '.modal', function () {
        window.setTimeout(function () {
            $('[autofocus]', this).focus();
        }.bind(this), 100);
    });
});


function bindForm(dialog) {
    $('form', dialog).submit(function () {
        var isValid = true; // assume all OK
        $('form').validate(); // perform validation on the form
        $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
            if (!$(this).valid()) {
                isValid = false; // signal errors
                return false; // break out of loop   
            }
        });
        if (!isValid) {
            return false; // exit
        }
        $('#progress').show();
        $.ajax({
            url: this.action,
            modal: true,
            draggable: true,
            resizable: false,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {

                    $('#myModal').modal('hide');
                    $('#progress').hide();
                    //location.reload();
                    alert(result.message);
            }
        });
        return false;
    });
}