HTML表内联css无法正常工作

Question

我的html页面中有以下代码行＆amp;表格没有显示边框

 <table style="{border-color: black;padding-left:2px;border-style: solid;border: 5px;border-width: 2px; }">

你能帮我调试吗。

Answer 1

语法错误。移除{和}

<table style="border-color: black;padding-left:2px;border-style: solid;border: 5px;border-width: 2px;">

也无需单独编写border-color，border-style和border-width。您可以像下面这样组合和简化。

 border:2px solid black;

所以你可以像这样更新你的代码。

<table style="border:2px solid black; padding-left:2px;">

Answer 2

除了不必要的括号之外，边框CSS还需要一点爱。试试这个：

<table style="padding-left:2px; border: 5px solid black;">

Answer 3

涉及到几个问题：

• 花括号{和}会使代码无效并导致代码被跳过。删除它们。参考：CSS Style Attributes。
• shorthand border notation始终设置所有边框属性，使用初始值作为默认值。因此，border: 5px将border-style设置为none（并border-color设置为color属性的值。最简单的解决方法是删除该声明;它似乎意味着设置边框宽度，但是使用这种方式它会产生不希望的副作用，而且你在后面的声明中设置宽度（到不同的值）。
• 即使修复了，代码也只在整个表格上设置边框，而不是在其单元格上设置边框，您可能也想在单元格上设置边框。在style元素的table属性中无法执行此操作;您需要在单元格元素的style属性中设置它们，或者在style元素中设置（更好）或在链接样式表中设置它们（甚至更好）。

处理前两个问题的最低限度固定代码是：

<table style="border-color: black;padding-left:2px;border-style: solid;
border-width: 2px">

Answer 4

试试这个：

JSFIDDLE

您的密码：

<table id="table" style="border-color: black;padding-left:2px;border-style: solid;border: 5px solid black;">