Javascript上传文件对齐方式

Question

在上图中，删除按钮需要正确对齐。在我的代码中，它根据文件名长度进行对齐。

 <script>
        var filelist = new Array();

        updateList = function () {
            var input = document.getElementById('fileUploader');
            var output = document.getElementById('divFiles');

            var HTML = "<table>";
            for (var i = 0; i < input.files.length; ++i) {
                filelist[i]=input.files.item(i).name;
                HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
            }
            HTML += "</table>";
            output.innerHTML += HTML;
        }
    </script>

Answer 1

请试一试。

table {
           border-collapse: separate;
           border-spacing: 0 3px;
           width: 600px;
       }

Answer 2

试试这个

table
{
  table-layout: fixed;
  width: 300px;
}

td
{
  border: 1px solid green;
  word-wrap:break-word;
}

try jsfiddle

Answer 3

<style>
        table {
            border-collapse: separate;
            border-spacing: 0 2px;
            width: 600px;
            table-layout: fixed;
        }
        tr:nth-child(1n) {
            border: 2px solid;
            background-color: #eceff1;
            color: Black;
        }
        tr:nth-child(2n) {
            border: 2px solid;
            color: Black;
        }
        td {

            padding-top: .5em;
            padding-left: .5em;
            padding-right: .5em;
            padding-bottom: .5em;
        }

        input[type="file"] {
            display: none;
        }
        .label1 {
            padding: 3px;
            background: #fff;
            display: table;
            color:black;
        }
        button {
            background-image: url('../../Images/delete.ico');
            background-size: cover;
            padding-right:0px;
            background-color: Transparent;
            cursor: pointer;
            border: none;
            width: 30px;
            height: 30px;
        }
    </style>
    <script>
     $(document).ready(function () {
         $(document).on('click', "button", function (e) {
             $(this).closest('tr').remove();
         });
     });
    </script>
    <script>
        var filelist = new Array();

        updateList = function () {
            var input = document.getElementById('fileUploader');
            var output = document.getElementById('divFiles');

            var HTML = "<table>";
            for (var i = 0; i < input.files.length; ++i) {
                filelist[i]=input.files.item(i).name;
                HTML += "<tr><td>" + filelist[i] + "</td><td><button ></button></td></tr>";
            }
            HTML += "</table>";
            output.innerHTML += HTML;
        }
    </script>

在上面的脚本中，删除按钮按固定顺序显示，但我希望文件名在左边对齐，删除按钮需要在右边角。