javascript - 增加标题栏和其他元素的宽度以覆盖整个 JQuery 对话框

Question

我有一个 JQuery 对话框，它在单击按钮时显示一个表格。

我需要:
1.对话框的标题栏要覆盖对话框的整个宽度。目前，标题栏有一些对话框从四面八方窥视。
2.表中有一行。该行应覆盖整个对话框。如何删除行两侧的边距？将 margin, padding 设置为 0 没有帮助。

HTML:

<button id="x">Click</button>
<!-- The part below is for the recorder dialog. -->
<div id="dialog-form-speakingPractice" class="ui-helper-hidden">
    <table id="recordTable" width="100%">
        <tr>
            <td colspan="3" id="word2Record">'Word'</td>
        </tr>
    </table>
</div>  

Javascript/JQuery:

$(document).ready(function () {

    $("#x").click(function () {
        alert("Button clicked");
        startRecorderDialog();
        $("#dialog-form-speakingPractice").dialog("open");
    });

    function startRecorderDialog() {
        $("#dialog-form-speakingPractice").dialog({
            autoOpen: false,
            height: 'auto',
            width: 'auto',
            modal: true,
            dialogClass: 'recorderDialogCSS',
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            }
        });
        $("#dialog-form-speakingPractice").dialog('option', 'title', 'Listen to Word');
    }
});  

CSS:

.ui-widget-overlay {
    background: transparent;
}
.recorderDialogCSS.ui-dialog {
    color: black;
    background: rgb(230, 230, 230);
}
.recorderDialogCSS .ui-dialog-titlebar {
    font-family: Arial;
    color: white;
    background: rgb(0, 83, 146);
    text-align: center;
    border: 0px;
}
#recordTable {
    padding: 0;
    margin: 0;
}
#recordTable td {
    border: 1px solid black;
    width: 100%;
    margin: 0;
    padding: 0;
}
#word2Record {
    background: rgb(133, 184, 56);
    font-family: Arial;
    color: white;
    margin: 0;
    text-align: center;
}

我还有一个 JFiddle here.

Answer 1

此处更新jsFiddle .所做的更改:

.recorderDialogCSS.ui-dialog {
    ...
    padding: 0;
}
#dialog-form-speakingPractice {
    padding:0;
}
#recordTable {
    ...
    border-collapse: collapse;
}