css - 即使在使用 border-collapse :separate 之后，border-radius 也未应用于 <tr> 行标记

Question

即使在使用 border-collapse:separate 之后，border radius 也不适用于行标签

 <div class="table-responsive">
                <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
               <tbody>
                   <tr ng-repeat="ac in ActionComment" style="border-style:hidden">
                        <td style="border-style:dashed";border:1px solid ;border-radius:5px"  >{{ac.Comment}}</td>
                   </tr>

                <tr style="border-style:hidden">
                    <td >
                    <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
                        <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
                            Comment
                        </asp:LinkButton>
                    </td>
                </tr>
            </tbody>
        </table>


        </div>

用过其他东西比如 border-top-left-radius:5px 等等 使用 border-collapse:collapse 以及 dint 工作 不确定为什么会这样

Answer 1

因为您只使用一列，所以您可以在 <td> 上设置边框直接像这样的元素(正如您建议的那样进行编辑):

<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover">
    <tbody>
      <tr ng-repeat="ac in ActionComment">
        <td style="display:grid;border-collapse:separate;border-style:solid;border-width:1px;border-radius:5px;">{{ac.Comment}}</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>

对于使用多列的表格，您可以使用以下解决方案来获取 <tr> 上的边框元素。

<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
    <tbody>
      <tr ng-repeat="ac in ActionComment" style="display:inline-block; border-collapse:separate; border-style:solid; border-width:1px; border-radius:5px;">
        <td style="">{{ac.Comment}}</td>
        <td style="">2nd column</td>
        <td style="">3rd column</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>

您还可以将边框应用于 <td> <tr> 的元素获得预期的边界。但这仅适用于列之间没有空格 ( margin) 的情况。

table {
  border-spacing:0;
}
.border-tr td:first-child {
  border-left:1px solid #000;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.border-tr td:last-child {
  border-right:1px solid #000;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
.border-tr td {
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}

<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
    <tbody>
      <tr ng-repeat="ac in ActionComment" class="border-tr">
        <td style="">{{ac.Comment}}</td>
        <td style="">2nd column</td>
        <td style="">3rd column</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>