行之间的间距

时间：2015-07-17 15:49:14

标签： html css

我有设置为特定显示的div来模仿表格。所以基本上我想要实现选择行时图像中显示的样式。我尝试过填充和边距，但它似乎不起作用。任何人都知道我该怎么做？

enter image description here 

.table {
  display: table;
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.row {
  display: table-row-group;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
.selected {
  background: red;
  margin: 20px;
  border: 1px solid red;
  border-radius: 10px;
}
<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
  </div>
</div>

5 个答案:

答案 0 :(得分：0)

这是你要找的吗？

$('.row').on('click', function () {
    $('.table div').removeClass('selected');
    $(this).addClass('selected');
});

小提琴：http://jsfiddle.net/dzbx8dkt/

编辑：意识到你在这里关注的是CSS样式，而不是功能。对？也许最好的选择是绝对定位在所选行上的div。

答案 1 :(得分：0)

也许这可以帮到你：

.table {
    display: table;
    border: 1px solid black;
    border-bottom: 0;
}

.row {
    display: table-row-group;
}

.header .{
    display: table-header-group;
    font-weight: bold;
    
}

.cell {
    display: table-cell;
    padding: 5px;
    border-bottom: 1px solid black;
  
}

.cell:first-child{
  border-right: 1px solid black;
}


.selected + .row .cell{
  border-top: 1px solid black;
}

.selected .cell{
    background: red;
 
}

.selected .cell:first-child{
  border-right: 0;
  border-radius: 10px 0 0 10px;
  border-bottom: 0px;
  
}

.selected .cell:nth-child(2){
  border-radius: 0 10px 10px 0;
  border-bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="table">
<div class="row header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
</div>
<div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
</div>
<div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
</div>
<div class="row footer">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
</div>
  
</body>
</html>

唯一的问题是padding属性不适用于display：table-row-group，table-header-group，table-footer-group，table-row，table-column-group和table-column elements。< / p>

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/padding

实施例： http://jsbin.com/tofokoriri/edit?html,css,output

答案 2 :(得分：0)

不是真正的答案，但也许它会给你一些提示 你可以使用outline属性玩一下。

＆＃13;
＆＃13; 
.table {
  display: table;
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.row {
  display: table-row-group;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
.selected {
  background: red;
  margin: 20px;
  border-radius: 10px;
}
.selected { outline: 2px solid blue;}
.selected .cell:first-child {border-right:1px solid red;}
.selected .cell:last-child {border-left:1px solid red;}
＆＃13; 
<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

这样的事情？我添加了另一个div图层来创建所需的填充效果，我希望这个解决方案能够满足您的需求。

＆＃13;
＆＃13; 
$('.row').on('click', function () {    
    $('.table div').removeClass('selected');
    $(this).addClass('selected');
});
＆＃13; 
.table {
    display: table;
}
.header {
    display: table-header-group;
    font-weight: bold;
}
.row {
    display: table-row-group;
    cursor: pointer;
}

.cell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
}
.selected .cell {
    padding: 10px;
}
.selected .cell .content{
    padding-top: 10px;
    padding-bottom: 10px;
}
.selected .cell:nth-child(1) .content{
    background-color: red;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding-left: 5px;
    margin-left: -5px;
    margin-right: -11px;
    
}
.selected .cell:nth-child(2) .content{
    background-color: red;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 5px;
    margin-right: -5px;
    padding-left: 11px;
    margin-left: -11px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
    <div class="header">
        <div class="cell">Header 1</div>
        <div class="cell">Header 2</div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 1 Cell 1</div></div>
        <div class="cell"><div class="content">Row 1 Cell 2</div></div>
    </div>
    <div class="row selected">
        <div class="cell"><div class="content">Row 2 Cell 1</div></div>
        <div class="cell"><div class="content">Row 2 Cell 2</div></div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 3 Cell 1</div></div>
        <div class="cell"><div class="content">Row 3 Cell 2</div></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

我认为你用jQuery切换类selected没有问题，所以如果你必须坚持使用那个标记和display: table，这是我的解决方案：

.table {
        display: table;
        border: 1px solid black;
    }

    .header {
        display: table-header-group;
        font-weight: bold;
    }

    .row {
        display: table-row-group;
    }

    .cell {
        display: table-cell;
        padding: 5px;
        border-bottom: 1px solid black;
    }

    .cell:first-child{
        border-right: 1px solid #000;
    }

    .row:last-child > .cell {
        border-bottom: none;
        border-top: 1px solid black;
    }

    .selected {}

    .selected > div:first-child {
        background: red;
        border-radius: 10px 0 0 10px;
        border: 4px solid white;
        border-right: none;
    }

    .selected > div:last-child {
        background: red;
        border-radius: 0 10px 10px 0;
        border: 4px solid white;
        border-left: none;
    }
相关问题
最新问题