resolves #975 use stylesheet to set default table width

- set default table width to 100% using CSS via class "spread"
- remove unnecessary .tableblock selectors in stylesheet

3 files changed, 29 insertions, 19 deletions

diff --git a/data/stylesheets/asciidoctor-default.css b/data/stylesheets/asciidoctor-default.css
index 92152da2..1cba7b57 100644
--- a/data/stylesheets/asciidoctor-default.css
+++ b/data/stylesheets/asciidoctor-default.css
@@ -58,7 +58,7 @@ img { display: inline-block; vertical-align: middle; }
 textarea { height: auto; min-height: 50px; }
 select { width: 100%; }
 p.lead, .paragraph.lead > p, #preamble > .sectionbody > .paragraph:first-of-type p { font-size: 1.21875em; line-height: 1.6; }
-.subheader, #content #toctitle, .admonitionblock td.content > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .mathblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, .tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title, .tableblock > caption { line-height: 1.4; color: #7a2518; font-weight: 300; margin-top: 0.2em; margin-bottom: 0.5em; }
+.subheader, #content #toctitle, .admonitionblock td.content > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .mathblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, table.tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title, table.tableblock > caption { line-height: 1.4; color: #7a2518; font-weight: 300; margin-top: 0.2em; margin-bottom: 0.5em; }
 div, dl, dt, dd, ul, ol, li, h1, h2, h3, #toctitle, .sidebarblock > .content > .title, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; direction: ltr; }
 a { color: #2156a5; text-decoration: underline; line-height: inherit; }
 a:hover, a:focus { color: #1d4b8f; }
@@ -170,8 +170,8 @@ p a > code:hover { color: #561309; }
 #content h1 > a.link, h2 > a.link, h3 > a.link, #toctitle > a.link, .sidebarblock > .content > .title > a.link, h4 > a.link, h5 > a.link, h6 > a.link { color: #ba3925; text-decoration: none; }
 #content h1 > a.link:hover, h2 > a.link:hover, h3 > a.link:hover, #toctitle > a.link:hover, .sidebarblock > .content > .title > a.link:hover, h4 > a.link:hover, h5 > a.link:hover, h6 > a.link:hover { color: #a53221; }
 .imageblock, .literalblock, .listingblock, .mathblock, .verseblock, .videoblock { margin-bottom: 1.25em; }
-.admonitionblock td.content > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .mathblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, .tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title { text-align: left; font-family: "Noto Serif", "DejaVu Serif", "Serif", serif; font-weight: normal; font-style: italic; }
-.tableblock > caption { text-align: left; font-family: "Noto Serif", "DejaVu Serif", "Serif", serif; font-weight: normal; font-style: italic; white-space: nowrap; overflow: visible; max-width: 0; }
+.admonitionblock td.content > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .mathblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, table.tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title { text-align: left; font-family: "Noto Serif", "DejaVu Serif", "Serif", serif; font-weight: normal; font-style: italic; }
+table.tableblock > caption { text-align: left; font-family: "Noto Serif", "DejaVu Serif", "Serif", serif; font-weight: normal; font-style: italic; white-space: nowrap; overflow: visible; max-width: 0; }
 table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p { font-size: inherit; }
 .admonitionblock > table { border: 0; background: none; width: 100%; }
 .admonitionblock > table td.icon { text-align: center; width: 80px; }
@@ -233,17 +233,19 @@ table.pyhltable .linenodiv { background-color: transparent !important; padding-r
 .quoteblock .attribution { margin-top: -0.625em; padding-bottom: 0.625em; font-size: inherit; color: #454545; line-height: 1.6; }
 .quoteblock .attribution br { display: none; }
 .quoteblock .attribution cite { display: block; }
-table thead th, table tfoot th { font-weight: bold; }
-table.tableblock.grid-all { border-collapse: separate; border-spacing: 1px; -webkit-border-radius: 4px; border-radius: 4px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
-table.tableblock.frame-topbot, table.tableblock.frame-none { border-left: 0; border-right: 0; }
-table.tableblock.frame-sides, table.tableblock.frame-none { border-top: 0; border-bottom: 0; }
+table.tableblock { max-width: 100%; }
 table.tableblock td .paragraph:last-child p > p:last-child, table.tableblock th > p:last-child, table.tableblock td > p:last-child { margin-bottom: 0; }
-th.tableblock.halign-left, td.tableblock.halign-left { text-align: left; }
-th.tableblock.halign-right, td.tableblock.halign-right { text-align: right; }
-th.tableblock.halign-center, td.tableblock.halign-center { text-align: center; }
-th.tableblock.valign-top, td.tableblock.valign-top { vertical-align: top; }
-th.tableblock.valign-bottom, td.tableblock.valign-bottom { vertical-align: bottom; }
-th.tableblock.valign-middle, td.tableblock.valign-middle { vertical-align: middle; }
+table.spread { width: 100%; }
+table.grid-all { border-collapse: separate; border-spacing: 1px; -webkit-border-radius: 4px; border-radius: 4px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
+table.frame-topbot, table.frame-none { border-left: 0; border-right: 0; }
+table.frame-sides, table.frame-none { border-top: 0; border-bottom: 0; }
+th.halign-left, td.halign-left { text-align: left; }
+th.halign-right, td.halign-right { text-align: right; }
+th.halign-center, td.halign-center { text-align: center; }
+th.valign-top, td.valign-top { vertical-align: top; }
+th.valign-bottom, td.valign-bottom { vertical-align: bottom; }
+th.valign-middle, td.valign-middle { vertical-align: middle; }
+table thead th, table tfoot th { font-weight: bold; }
 tbody tr th { display: table-cell; line-height: 1.6; background: whitesmoke; }
 tbody tr th, tbody tr th p, tfoot tr th, tfoot tr th p { color: #333333; font-weight: bold; }
 td > div.verse { white-space: pre; }
diff --git a/lib/asciidoctor/converter/html5.rb b/lib/asciidoctor/converter/html5.rb
index 821d655f..1cd78849 100644
--- a/lib/asciidoctor/converter/html5.rb
+++ b/lib/asciidoctor/converter/html5.rb
@@ -734,12 +734,20 @@ Your browser does not support the audio tag.
       result = [] 
       id_attribute = node.id ? %( id="#{node.id}") : nil
       classes = ['tableblock', %(frame-#{node.attr 'frame', 'all'}), %(grid-#{node.attr 'grid', 'all'})]
-      if (role_class = node.role)
-        classes << role_class
+      styles = []
+      unless node.option? 'autowidth'
+        if (tablepcwidth = node.attr 'tablepcwidth') == 100
+          classes << 'spread'
+        else
+          styles << %(width: #{tablepcwidth}%;)
+        end
+      end
+      if (role = node.role)
+        classes << role
       end
       class_attribute = %( class="#{classes * ' '}")
-      styles = [(node.option? 'autowidth') ? nil : %(width: #{node.attr 'tablepcwidth'}%;), (node.attr? 'float') ? %(float: #{node.attr 'float'};) : nil].compact
-      style_attribute = styles.size > 0 ? %( style="#{styles * ' '}") : nil
+      styles << %(float: #{node.attr 'float'};) if node.attr? 'float'
+      style_attribute = styles.empty? ? nil : %( style="#{styles * ' '}")
 
       result << %(<table#{id_attribute}#{class_attribute}#{style_attribute}>)
       result << %(<caption class="title">#{node.captioned_title}</caption>) if node.title?
diff --git a/test/tables_test.rb b/test/tables_test.rb
index 192b9788..d8418ee6 100644
--- a/test/tables_test.rb
+++ b/test/tables_test.rb
@@ -18,7 +18,7 @@ context 'Tables' do
       cells = [%w(A B C), %w(a b c), %w(1 2 3)]
       output = render_embedded_string input
       assert_css 'table', output, 1
-      assert_css 'table.tableblock.frame-all.grid-all[style*="width: 100%"]', output, 1
+      assert_css 'table.tableblock.frame-all.grid-all.spread', output, 1
       assert_css 'table > colgroup > col[style*="width: 33%"]', output, 3
       assert_css 'table tr', output, 3
       assert_css 'table > tbody > tr', output, 3
@@ -438,7 +438,7 @@ I am getting in shape!
 
     test 'percentages as column widths' do
       input = <<-EOS
-[width="100%", cols="<.^10%,<90%"]
+[cols="<.^10%,<90%"]
 |===
 |column A |column B
 |===