css td标记中的div标记会导致在将表内容复制到剪贴板时添加新行

hivapdat  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(88)

我想复制我的HTML表格元素到剪贴板。但我已经使用了表的td标签内的div标签。我认为从剪贴板粘贴内容后添加一个新行是什么。我想留在同一行。请帮助如何使之成为可能。

    • 示例输出**

配置文件UID:12345
姓名:约翰
电子邮件:约翰·杜@www.example.comxyz.com
配置文件状态:启用
国家代码:美国(+1)

    • 电话号码**:

电话:+1 -456789125
上次生成的OTP:x5xx555
员工编号:223344
用户名:

    • 所需输出**

配置文件UID:12345
姓名:约翰
电子邮件:约翰·杜@www.example.comxyz.com
配置文件状态:启用
国家代码:美国(+1)

    • 电话号码**:电话:+1 -456789125

上次生成的OTP:x5xx555
员工编号:223344
用户名:

  • 查看上述两个输出中的电话号码文本。*
    • 索引. html**
<div style="margin-left: 2rem">
    <button class="btn btn-primary" type="button" style="background-color: #001872; display: none" onclick="copyTable(document.getElementById('table'))" id="copy"> <i class="fa-regular fa-copy"></i> </button>
</div>

<table class="table table-striped table-hover" style="display: none" id="table">
    <tbody>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">ProfileUID :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">First Name :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Email :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Profile Status :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Country Code :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr>
            <th style="width: 20%" class="col-sm-4 text-center" scope="row" style="padding-top: 12px;"> Phone No. :</th>
            <form action="" method="post" id="form2" style="display: inline-block;"> {% csrf_token %}
                <td style="width: 50%">
                    <div style="display: flex; justify-content: space-between;">
                        <div style="width: 25%;" id="1"></div>
                        <div style="width:100%; border: 0px solid red; align-self: center; text-align: center;" id="2"></div>
                        <div style="border: 0px solid blue; width: 25%; text-align: right">
                            <button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872;" onclick="edits()"><i class="fa-solid fa-square-pen fa-2x"></i> </button>
                            <button type="submit" id="save" style="display:none; border-style: none; background-color:transparent; color:#17d647e8; padding: 2px;" onclick="saved()"><i class="fa-solid fa-square-check fa-2x"></i></button>
                            <button type="button" id="cancel" style="display:none; border-style: none; background-color:transparent; color:#c42c2c;"><i class="fa-solid fa-square-xmark fa-2x" onclick="canceled()"></i></button>
                        </div>
                </td>
            </form>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Employee ID :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">User ID :</th>
            <td style="width: 50%"></td>
        </tr>
    </tbody>
</table>
    • 脚本. js**
function copyTable(el) {
  var body = document.body,
    range,
    sel;
  if (document.createRange && window.getSelection) {
    range = document.createRange();
    sel = window.getSelection();
    sel.removeAllRanges();
    try {
      range.selectNodeContents(el);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(el);
      sel.addRange(range);
    }
  } else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
  }
  document.execCommand("Copy");
}
ljsrvy3e

ljsrvy3e1#

Div标记是块元素块元素使一个新行我想这个css代码会工作。

div {
    display: inline;
}

相关问题