Question

我希望在显示时使对话框的宽度更大，并且还有那些水平的中间边框，我想这不是因为我的网站引导程序不包含它们，我该如何修复它们？这是我的代码：

$(document).ready(function() {
    $(document).on("click",".reports tr",function(){
          //alert($(this).attr("id"));

      $("#data").empty();
      $("#data").append(

              "<table class= 'table display border=3px solid black' style= 'width:700px;'>" +

"<tr>"+"<th>Months</th>"+"<th>Charges</th>"+"<th>Payments</th>"+ "</tr>"+

            "<tr>"+"<th>Janurary</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"1"+"_"+$(this).attr("year")).html()+"</th>" + "<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"1"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>Feburary</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"2"+"_"+$(this).attr("year")).html()+"</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"2"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>March</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"3"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"3"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
            "<tr>"+"<th>April</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"4"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"4"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>May</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"5"+"_"+$(this).attr("year")).html()+"</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"5"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>June</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"6"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"6"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>July</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"7"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"7"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
            "<tr>"+"<th>August</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"8"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"8"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
            "<tr>"+"<th>September </th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"9"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"9"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+"<th>October</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"10"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"10"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
            "<tr>"+ "<th>November</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"11"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"11"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
            "<tr>"+"<th>December</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"12"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"12"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+






              "</table>"


              );
      $("#data").dialog();
    });
});

这是页面末尾的div：

<div id="data" border="6" style= "height:50%;width:900px;background-color: #fcf8e3; font-weight: bold;font-size:14;white-space: nowrap;">

</div>

Answer 1

您可以使用width选项设置jQuery UI对话框的宽度。例如：

$("#data").dialog({
    width: 700
});

See documentation

您可以使用以下css在第一列和第二列之间设置边框：

.table th:first-child {
    border-right: 1px solid black;
}

此外，请注意您的表类中存在错误： border=3px solid black不是有效的类。

我建议您将所有内联样式移动到单独的CSS文件中并使用正确的类名。

无论我放什么，我的对话框设计都没有改变

1 个答案: