防止 td 在悬停时移动

Question

如果您添加一本书，您会看到该项目添加到 table 中，字体很棒 fa-remove X。悬停时我增加了图标的大小，但它稍微移动了其他 td 中的文本。有什么办法可以避免这种情况吗？

更新：我发现如果我们将 link 包装在 p 标签中并应用 width:0 和 margin-bottom:0 它会起作用，但这似乎是一种 hack。有没有更好的方法？

function Book(title,author,isbn){
    this.title = title
    this.author = author
    this.isbn = isbn
}

function UI(){}
UI.addTr = function (book){
    const table = document.getElementById("tbody");
    const row = table.insertRow(-1);

    const td0 = row.insertCell(0);
    const td1 = row.insertCell(1);
    const td2 = row.insertCell(2);
    const td3 = row.insertCell(3);

    td0.innerHTML = book.title;
    td1.innerHTML = book.author;
    td2.innerHTML = book.isbn;
    td3.innerHTML = '<a href="#" class="fa fa-remove text-align-center"></a>';

    const x = document.querySelectorAll('a')
    //console.log(x,x[x.length - 1])
    x[x.length - 1].addEventListener('click',myDelete)
}

UI.deleteTr = function(tr){

}

function myDelete(e){
    //console.log(e.target)
}



const submit=document.getElementById('submit').addEventListener('click',mySubmit)
//console.log(document.getElementById('submit'))
function mySubmit(e){
    e.preventDefault();

    const inputs = Array.from(document.getElementsByClassName('inputs'))
    let title, author, isbn

    inputs.forEach((input,i) => {
        switch(i){
            case 0:
                title = input.value
                break
            case 1:
                author = input.value
                break
            case 2:
                isbn = input.value
                break
        }
    });

    if(title == '' || author == '' || isbn == ''){
        console.log('check inputs')
    }else{
        inputs.forEach((input) => {
            input.value=''
        })
        const book = new Book(title,author,isbn)
        UI.addTr(book)
    }
}

#submit{
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h1{
    font-size:3rem!important;
}

#submit{
    font-size:12px;
}

body{
        letter-spacing:.1rem;
}

a, a:hover{
    text-decoration:none!important;
    color:red!important;
    text-align:left;
}

a:hover{
    font-size:larger;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




    </head>

    <body>
        <div class="container  w-75">
            <h1 class="display-4 mb-4">Add Book</h1>
            <form id="bookInputs">
                <div class="form-group">
                    <label class='font-weight-bold' for="title">Title</label>
                    <input type="text" class="form-control inputs" id="title">
                </div>
                <div class="form-group">
                    <label class='font-weight-bold' for="author">Author</label>
                    <input type="text" class="form-control inputs" id="author">
                </div>
                <div class="form-group">
                    <label class='font-weight-bold' for="isbn">ISBN#</label>
                    <input type="text" class="form-control inputs" id="isbn">
                </div>
                <input id='submit' type='submit' value='submit' class='font-weight-bold w-100 bg-white border border-grey rounded'>
            </form>

            <table id='myTable' class="table table-striped">
                <thead>
                    <tr>
                        <th class='border-top-0'>Title</th>
                        <th class='border-top-0'>Author</th>
                        <th class='border-top-0'>ISBN</th>
                        <th class='border-top-0'></th>
                    </tr>
                </thead>
                <tbody id='tbody'>
                </tbody>

            </table>

        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        
    </body>

</html>

Answer 1

设置宽度限制即可解决。

简单案例：

#myTable td { width: 25%}

function Book(title,author,isbn){
    this.title = title
    this.author = author
    this.isbn = isbn
}

function UI(){}
UI.addTr = function (book){
    const table = document.getElementById("tbody");
    const row = table.insertRow(-1);

    const td0 = row.insertCell(0);
    const td1 = row.insertCell(1);
    const td2 = row.insertCell(2);
    const td3 = row.insertCell(3);

    td0.innerHTML = book.title;
    td1.innerHTML = book.author;
    td2.innerHTML = book.isbn;
    td3.innerHTML = '<a href="#" class="fa fa-remove text-align-center"></a>';

    const x = document.querySelectorAll('a')
    //console.log(x,x[x.length - 1])
    x[x.length - 1].addEventListener('click',myDelete)
}

UI.deleteTr = function(tr){

}

function myDelete(e){
    //console.log(e.target)
}



const submit=document.getElementById('submit').addEventListener('click',mySubmit)
//console.log(document.getElementById('submit'))
function mySubmit(e){
    e.preventDefault();

    const inputs = Array.from(document.getElementsByClassName('inputs'))
    let title, author, isbn

    inputs.forEach((input,i) => {
        switch(i){
            case 0:
                title = input.value
                break
            case 1:
                author = input.value
                break
            case 2:
                isbn = input.value
                break
        }
    });

    if(title == '' || author == '' || isbn == ''){
        console.log('check inputs')
    }else{
        inputs.forEach((input) => {
            input.value=''
        })
        const book = new Book(title,author,isbn)
        UI.addTr(book)
    }
}

/******/
#myTable td{width:25%}
/******/


#submit{
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h1{
    font-size:3rem!important;
}

#submit{
    font-size:12px;
}

body{
        letter-spacing:.1rem;
}

a, a:hover{
    text-decoration:none!important;
    color:red!important;
    text-align:left;
}

a:hover{
    font-size:larger;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




    </head>

    <body>
        <div class="container  w-75">
            <h1 class="display-4 mb-4">Add Book</h1>
            <form id="bookInputs">
                <div class="form-group">
                    <label class='font-weight-bold' for="title">Title</label>
                    <input type="text" class="form-control inputs" id="title">
                </div>
                <div class="form-group">
                    <label class='font-weight-bold' for="author">Author</label>
                    <input type="text" class="form-control inputs" id="author">
                </div>
                <div class="form-group">
                    <label class='font-weight-bold' for="isbn">ISBN#</label>
                    <input type="text" class="form-control inputs" id="isbn">
                </div>
                <input id='submit' type='submit' value='submit' class='font-weight-bold w-100 bg-white border border-grey rounded'>
            </form>

            <table id='myTable' class="table table-striped">
                <thead>
                    <tr>
                        <th class='border-top-0'>Title</th>
                        <th class='border-top-0'>Author</th>
                        <th class='border-top-0'>ISBN</th>
                        <th class='border-top-0'></th>
                    </tr>
                </thead>
                <tbody id='tbody'>
                </tbody>

            </table>

        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        
    </body>

</html>

防止 td 在悬停时移动

prevent movement of td's on hover

javascript

css

html-table

hyperlink

placement