Question

我正在显示大量数据的显示页面。一些数据是短字符串，其中一些是长字符串（> 200char），有些是数字。我的问题是这样的：当我创建一个表并设置它的样式时，我如何制作它，以便表的样式为该表中的单元格设置固定大小，而不是为每个单独的单元格手动设置它，因为我已经结束了50个表，10行或更多，每个表有多个单元格。我问这个是因为我输入的数据似乎正在调整单元格的大小以使其适合，并且它会破坏相邻的单元格，而这些单元格无法发生。以下是我想要的样本：

                             <table style={table_style_sub}>
                                <tr>
                                   <td><b>Client Name:</b></td>
                                    <td>{client2}</td>
                                </tr>
                                <tr>
                                    <td><b>Location:</b></td>
                                    <td>{client2Location}</td>
                                </tr>
                                <tr>
                                    <td><b>Phone:</b></td>
                                    <td>{client2Phone}</td>
                                </tr>
                                <tr>
                                    <td><b>Emails:</b></td>
                                    <td>{client2Email}</td>
                                </tr>
                                <tr>
                                    <td style={cell_format}><b>Details:</b></td>
                                    <td>{client2Service}</td>
                                </tr>
                            </table>

这是我的表格。这是格式：

var table_style_sub={
    margin: 'auto',
    width: '400px',
    marginBottom: '15px',
    border: '1px dotted black'
}

是否可以添加到此table_style_sub以使相应表格的每个<td>的宽度均为'Xpx'，而无需手动键入<td style={{width:"Xpx}}>超过300次。

以下是整个代码，如果你想看到它以了解我实际拥有多少行：http://pastebin.com/6rzRz2Vj

Answer 1

你可以在javascript本身尝试这样的东西，

在你的代码中似乎有一个id为id =＆＃34; messagesDiv＆＃34;封闭表，以便使用该ID并获取tds，然后在javascript中将其样式设置为宽度，如下所示，

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
  <script src="angular.min.js"></script>
</head>
<body>

<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
             
                        <h3>Contact Information</h3>
                        <table style={table_style}>
                            <tr>
                                <td><b>Legal Name: </b></td>
                                <td>{legalEntity}</td>
                            </tr>
                            <tr>
                                <td><b>Operating Name:</b> </td>
                                <td>{operatingName}</td>
                            </tr>
                            <tr>
                                <td><b>Role: </b></td>
                                <td>{string_role[role]}</td>
                            </tr>
                            <tr>
                                <td><b>Address 1: </b></td>
                                <td>{address1}</td>
                            </tr>
                            <tr>
                                <td><b>Address 2: </b></td>
                                <td>{address2}</td>
                            </tr>
                            <tr>
                                <td><b>City:</b> </td>
                                <td>{city}</td>
                            </tr>
                            <tr>
                                <td><b>Province:</b></td>
                                <td>{province}</td>
                            </tr>
                            <tr>
                                <td><b>Country: </b></td>
                                <td>{country}</td>
                            </tr>
                            <tr>
                                <td><b>Postal Code:</b></td>
                                <td>{postalCode}</td>
                            </tr>
                            <tr>
                                <td><b>Phone:</b></td>
                                <td>{phone}</td>
                            </tr>
                            <tr>
                                <td><b>Fax:</b></td>
                                <td>{fax}</td>
                            </tr>
                            <tr>
                                <td><b>Email:</b></td>
                                <td>{email}</td>
                            </tr>
                            <tr>
                                <td><b>Admin Contact:</b></td>
                                <td>{adminContact}</td>
                            </tr>
                            <tr>
                                <td><b>Techncal Contact:</b></td>
                                <td>{technicalContact}</td>
                            </tr>
                        </table>
                        </div>
</form>
<script>
	var div=document.getElementById("messagesDiv");
	var tds=div.getElementsByTagName("td");
	for(var i=0;i<tds.length;i++){
		tds[i].style.width='200px';
	}
</script>
</body>
</html>

＆＃13;

格式化表格中的单元格，而不重复相同的代码数百次？

1 个答案: