Question

我表格的每一行都有一个1px的border-top，由于某种原因，表格中的第一个非标题单元格获得额外的空间（看起来是1px），它会抛出行之间的边界线。我知道解决这个问题我可以删除边界崩溃：崩溃 - 但我真的想弄清楚为什么会发生这种情况。

我的许多其他表格大致有相同的布局，Firefox中的边框也没有问题。

CSS：

table {
  box-sizing: border-box;
  border-collapse: collapse;
border-spacing: 0;
}

.fullWidth {
  width: 100%;
}

.standardTable th {
    background: #999;
    border-right: 1px solid #fff;
    border-bottom: 3px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5em;
    padding: 2px 10px;
    text-transform: uppercase;
}
th, td, caption {
    font-weight: normal;
    vertical-align: middle;
    text-align: left;
}

.w100 {
    width: 100px;
}
.center {
    text-align: center;
}

.action-table tr:nth-child(2) td {
    border-top: 1px solid transparent;
}
.action-table td.icon-cell {
    line-height: 17px;
}
.action-table tr td {
    border-top: 1px solid #d9d9d9;
    height: 54px;
    position: relative;
}
.action-table tr td {
    border-top: 1px solid #d9d9d9;
    height: 54px;
}
.standardTable td {
    color: #444;
    font-weight: 400;
    font-size: 12px;
    height: 43px;
    padding: 0 10px;
    vertical-align: middle;
}
.icon-element {
    display: table;
    vertical-align: middle;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

HTML：

<table class="standardTable fullWidth action-table">
    <tbody><tr>
        <th>Policy Name</th>
        <th class="center w100">Earned YTD</th>
        <th class="center w100">Used YTD</th>
        <th class="center w100">Current Balance</th>
        <th class="center">Action</th>
    </tr>


    <tr id="RowType-1">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-vacation"></span></div>
        fg Vacation Policy
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">13.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">-13.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



    <tr id="RowType-2">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-sick"></span></div>
        Full Time Employee Sick Policy
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



    <tr id="RowType-3">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-other"></span></div>
        Personal hours Policy
    </td>
    <td class="center">
                <span class="unit-value">50.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">2.50</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">47.50</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



<tr id="RowType-4">
    <td class="icon-cell icon-element">
        <div class="time-off-icon-wrapper"><span class="action-icon icon-holiday"></span></div>
            Holiday Policy*
        </td>
        <td class="center">
            <span class="SecondaryText">n/a</span>
        </td>
        <td class="center">
            <span class="unit-value">0.00</span>
            <span class="unit-label">hrs</span>
        </td>
        <td class="center">
            <span class="SecondaryText">n/a</span>
        </td>
        <td class="center">
        </td>
    </tr>


</tbody></table>

Answer 1

出于某种原因，你有这个：

func cutAnim(){
    for view in animating {
        ///I use a UIView because I wanted the container of my button to be animated. UIButton will work just fine too.
        (view.value as? UIView)?.layer.removeAllAnimations()
    }
}

func pulse(button: UIButton, name: String){
    ///Here I capture that container
    let container = button.superview?.superview
    ///Add to Dictionary
    animating[name] = container
    cutAnim()
     UIView.animate(withDuration: 1, delay: 0.0, options:[UIViewAnimationOptions.repeat, UIViewAnimationOptions.autoreverse, .allowUserInteraction], animations: {
        container?.transform = CGAffineTransform(scaleX: 1.15, y: 1.15)
        ///if you stop the animation half way it completes anyways so I want the container to go back to its original size
        container?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
    }, completion: nil) 
}

首先设置@IBAction func buttonWasTappedAction(_ sender: Any) { pulse(button: sender as! UIButton, name: "nameForDictionary") }，然后将其设置为.icon-element { display: table; vertical-align: middle; display: -webkit-flex; display: flex; align-items: center; }以覆盖它。您有这样一个单元设置的特殊原因吗？如果您将此单元格设置为display: table（或者只是删除其他display: flex元素），则行及其边框将正确对齐。

如果您需要此单元格包含嵌套表格（flex或普通表格），我建议添加一个嵌套display: table-cell，其中包含您的新display，以便当前表格单元格保持不变。

表格边框在Firefox中没有正确排列

1 个答案: