resolves #4160 use width attribute to set width of table and table column (PR #4161)

5 files changed, 32 insertions, 31 deletions

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 2ca91dc3..fa94e862 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -36,6 +36,7 @@ Bug Fixes::
 
 Improvements::
 
+  * Use width attribute to set table and column width instead of inline style (#4160)
   * Prevent line numbers on source blocks in HTML output from being selected (applies to pygments, rouge, and coderay) (#4128)
   * Layout lines of a source block with table-based line numbering as rows in the table when using Rouge as source highlighter (#4130)
   * Remove duplicate selectors in default stylesheet; enable stylelint rule to check for them
diff --git a/features/xref.feature b/features/xref.feature
index e0dc1dc9..ec14ce41 100644
--- a/features/xref.feature
+++ b/features/xref.feature
@@ -772,7 +772,7 @@ Feature: Cross References
     """
     table.tableblock.frame-all.grid-all.stretch
       colgroup
-        col style='width: 100%;'
+        col width="100%"
       tbody
         tr
           td.tableblock.halign-left.valign-top
diff --git a/lib/asciidoctor/converter/html5.rb b/lib/asciidoctor/converter/html5.rb
index ca59c45a..4056fb96 100644
--- a/lib/asciidoctor/converter/html5.rb
+++ b/lib/asciidoctor/converter/html5.rb
@@ -550,9 +550,9 @@ Your browser does not support the audio tag.
       result << '<table>'
       if (node.attr? 'labelwidth') || (node.attr? 'itemwidth')
         result << '<colgroup>'
-        col_style_attribute = (node.attr? 'labelwidth') ? %( style="width: #{(node.attr 'labelwidth').chomp '%'}%;") : ''
+        col_style_attribute = (node.attr? 'labelwidth') ? %( width="#{(node.attr 'labelwidth').chomp '%'}%") : ''
         result << %(<col#{col_style_attribute}#{slash}>)
-        col_style_attribute = (node.attr? 'itemwidth') ? %( style="width: #{(node.attr 'itemwidth').chomp '%'}%;") : ''
+        col_style_attribute = (node.attr? 'itemwidth') ? %( width="#{(node.attr 'itemwidth').chomp '%'}%") : ''
         result << %(<col#{col_style_attribute}#{slash}>)
         result << '</colgroup>'
       end
@@ -860,13 +860,13 @@ Your browser does not support the audio tag.
     if (stripes = node.attr 'stripes', nil, 'table-stripes')
       classes << %(stripes-#{stripes})
     end
-    style_attribute = ''
+    width_attribute = ''
     if (autowidth = node.option? 'autowidth') && !(node.attr? 'width')
       classes << 'fit-content'
     elsif (tablewidth = node.attr 'tablepcwidth') == 100
       classes << 'stretch'
     else
-      style_attribute = %( style="width: #{tablewidth}%;")
+      width_attribute = %( width="#{tablewidth}%")
     end
     classes << (node.attr 'float') if node.attr? 'float'
     if (role = node.role)
@@ -874,7 +874,7 @@ Your browser does not support the audio tag.
     end
     class_attribute = %( class="#{classes.join ' '}")
 
-    result << %(<table#{id_attribute}#{class_attribute}#{style_attribute}>)
+    result << %(<table#{id_attribute}#{class_attribute}#{width_attribute}>)
     result << %(<caption class="title">#{node.captioned_title}</caption>) if node.title?
     if (node.attr 'rowcount') > 0
       slash = @void_element_slash
@@ -883,7 +883,7 @@ Your browser does not support the audio tag.
         result += (Array.new node.columns.size, %(<col#{slash}>))
       else
         node.columns.each do |col|
-          result << ((col.option? 'autowidth') ? %(<col#{slash}>) : %(<col style="width: #{col.attr 'colpcwidth'}%;"#{slash}>))
+          result << ((col.option? 'autowidth') ? %(<col#{slash}>) : %(<col width="#{col.attr 'colpcwidth'}%"#{slash}>))
         end
       end
       result << '</colgroup>'
diff --git a/test/lists_test.rb b/test/lists_test.rb
index 5d62731c..710cefdc 100644
--- a/test/lists_test.rb
+++ b/test/lists_test.rb
@@ -3165,8 +3165,8 @@ context 'Description lists (:dlist)' do
       assert_css 'table', output, 1
       assert_css 'table > colgroup', output, 1
       assert_css 'table > colgroup > col', output, 2
-      assert_xpath '(//table/colgroup/col)[1][@style="width: 25%;"]', output, 1
-      assert_xpath '(//table/colgroup/col)[2][@style="width: 75%;"]', output, 1
+      assert_xpath '(//table/colgroup/col)[1][@width="25%"]', output, 1
+      assert_xpath '(//table/colgroup/col)[2][@width="75%"]', output, 1
     end
 
     test 'should set col widths of item and label in docbook if specified' do
diff --git a/test/tables_test.rb b/test/tables_test.rb
index d554fde2..0e033607 100644
--- a/test/tables_test.rb
+++ b/test/tables_test.rb
@@ -19,8 +19,8 @@ context 'Tables' do
       output = doc.convert
       assert_css 'table', output, 1
       assert_css 'table.tableblock.frame-all.grid-all.stretch', output, 1
-      assert_css 'table > colgroup > col[style*="width: 33.3333%"]', output, 2
-      assert_css 'table > colgroup > col:last-of-type[style*="width: 33.3334%"]', output, 1
+      assert_css 'table > colgroup > col[width="33.3333%"]', output, 2
+      assert_css 'table > colgroup > col:last-of-type[width="33.3334%"]', output, 1
       assert_css 'table tr', output, 3
       assert_css 'table > tbody > tr', output, 3
       assert_css 'table td', output, 9
@@ -342,8 +342,8 @@ context 'Tables' do
       output = doc.convert standalone: false
       assert_css 'table', output, 1
       assert_css 'table colgroup col', output, 4
-      assert_css 'table colgroup col[style]', output, 1
-      assert_css 'table colgroup col[style*="width: 15%"]', output, 1
+      assert_css 'table colgroup col[width]', output, 1
+      assert_css 'table colgroup col[width="15%"]', output, 1
     end
 
     test 'can assign autowidth to all columns even when table has a width' do
@@ -364,7 +364,7 @@ context 'Tables' do
       end
       output = doc.convert standalone: false
       assert_css 'table', output, 1
-      assert_css 'table[style*="width: 50%"]', output, 1
+      assert_css 'table[width="50%"]', output, 1
       assert_css 'table colgroup col', output, 4
       assert_css 'table colgroup col[style]', output, 0
     end
@@ -417,7 +417,7 @@ context 'Tables' do
       EOS
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
-      assert_css 'table[style*="width"]', output, 1
+      assert_css 'table[width]', output, 1
       assert_css 'table colgroup col', output, 3
       assert_css 'table colgroup col[style*="width"]', output, 0
     end
@@ -503,8 +503,8 @@ context 'Tables' do
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
       assert_css 'table > colgroup > col', output, 2
-      assert_css 'col[style="width: 25%;"]', output, 1
-      assert_css 'col[style="width: 75%;"]', output, 1
+      assert_css 'col[width="25%"]', output, 1
+      assert_css 'col[width="75%"]', output, 1
       assert_xpath '(//td)[1]//strong', output, 1
       assert_xpath '(//td)[2]//code', output, 1
     end
@@ -519,7 +519,7 @@ context 'Tables' do
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
       assert_css 'table > colgroup > col', output, 2
-      assert_css 'col[style="width: 50%;"]', output, 2
+      assert_css 'col[width="50%"]', output, 2
       assert_css 'table > tbody > tr', output, 3
     end
 
@@ -534,7 +534,7 @@ context 'Tables' do
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
       assert_css 'table > colgroup > col', output, 2
-      assert_css 'col[style="width: 50%;"]', output, 2
+      assert_css 'col[width="50%"]', output, 2
       assert_css 'table > tbody > tr', output, 3
     end
 
@@ -549,7 +549,7 @@ context 'Tables' do
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
       assert_css 'table > colgroup > col', output, 2
-      assert_css 'col[style="width: 50%;"]', output, 2
+      assert_css 'col[width="50%"]', output, 2
       assert_css 'table > tbody > tr', output, 3
     end
 
@@ -1023,13 +1023,13 @@ context 'Tables' do
       EOS
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
-      assert_css 'table[style*="width: 80%"]', output, 1
+      assert_css 'table[width="80%"]', output, 1
       assert_xpath '/table/caption[@class="title"][text()="Table 1. Horizontal and vertical source data"]', output, 1
       assert_css 'table > colgroup > col', output, 4
-      assert_css 'table > colgroup > col:nth-child(1)[style*="width: 17.647%"]', output, 1
-      assert_css 'table > colgroup > col:nth-child(2)[style*="width: 11.7647%"]', output, 1
-      assert_css 'table > colgroup > col:nth-child(3)[style*="width: 11.7647%"]', output, 1
-      assert_css 'table > colgroup > col:nth-child(4)[style*="width: 58.8236%"]', output, 1
+      assert_css 'table > colgroup > col:nth-child(1)[width="17.647%"]', output, 1
+      assert_css 'table > colgroup > col:nth-child(2)[width="11.7647%"]', output, 1
+      assert_css 'table > colgroup > col:nth-child(3)[width="11.7647%"]', output, 1
+      assert_css 'table > colgroup > col:nth-child(4)[width="58.8236%"]', output, 1
       assert_css 'table > thead', output, 1
       assert_css 'table > thead > tr', output, 1
       assert_css 'table > thead > tr > th', output, 4
@@ -1052,8 +1052,8 @@ context 'Tables' do
 
       output = convert_string_to_embedded input
       assert_xpath '/table/colgroup/col', output, 2
-      assert_xpath '(/table/colgroup/col)[1][@style="width: 10%;"]', output, 1
-      assert_xpath '(/table/colgroup/col)[2][@style="width: 90%;"]', output, 1
+      assert_xpath '(/table/colgroup/col)[1][@width="10%"]', output, 1
+      assert_xpath '(/table/colgroup/col)[2][@width="90%"]', output, 1
     end
 
     test 'spans, alignments and styles' do
@@ -1068,7 +1068,7 @@ context 'Tables' do
       EOS
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
-      assert_css 'table > colgroup > col[style*="width: 25%"]', output, 4
+      assert_css 'table > colgroup > col[width="25%"]', output, 4
       assert_css 'table > tbody > tr', output, 4
       assert_css 'table > tbody > tr > td', output, 10
       assert_css 'table > tbody > tr:nth-child(1) > td', output, 4
@@ -2162,8 +2162,8 @@ context 'Tables' do
       assert_equal 100, table.columns.map {|col| col.attributes['colpcwidth'] }.reduce(:+)
       output = doc.convert
       assert_css 'table', output, 1
-      assert_css 'table > colgroup > col[style*="width: 14.2857%"]', output, 6
-      assert_css 'table > colgroup > col:last-of-type[style*="width: 14.2858%"]', output, 1
+      assert_css 'table > colgroup > col[width="14.2857%"]', output, 6
+      assert_css 'table > colgroup > col:last-of-type[width="14.2858%"]', output, 1
       assert_css 'table > tbody > tr', output, 6
       assert_xpath '//tr[4]/td[5]/p/text()', output, 0
       assert_xpath '//tr[3]/td[5]/p[text()="MySQL:Server"]', output, 1
@@ -2310,7 +2310,7 @@ context 'Tables' do
       EOS
       output = convert_string_to_embedded input
       assert_css 'table', output, 1
-      assert_css 'table > colgroup > col[style*="width: 20%"]', output, 5
+      assert_css 'table > colgroup > col[width="20%"]', output, 5
       assert_css 'table > thead > tr', output, 1
       assert_css 'table > tbody > tr', output, 6
       assert_xpath '((//tbody/tr)[1]/td)[4]/p[text()="ac, abs, moon"]', output, 1