Question

即使使用border-collapse：separate

，边界半径也不适用于行标记

 <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>的{{1}}元素以获取预期的边框。但这仅在列之间没有空格（<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;
}

即使使用border-collapse：separate，border-radius也不会应用于<tr>行标记

1 个答案: