If you use Foundation 4 (F4) you can pick and choose which parts of foundation CSS are generated by Compass / Sass. Don't forget to run compass compile after you make the change.
edit -> sass/app.scss
// Global Foundation Settings
@import "settings";
// Comment out this import if you are customizing you imports below
// @import "foundation";
// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing
@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
@import "foundation/components/visibility";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
@import "foundation/components/button-groups"; // *requires components/buttons
@import "foundation/components/dropdown-buttons"; // *requires components/buttons
@import "foundation/components/split-buttons"; // *requires components/buttons
@import "foundation/components/flex-video";
@import "foundation/components/section";
@import "foundation/components/top-bar"; // *requires components/grid
@import "foundation/components/orbit";
@import "foundation/components/reveal";
@import "foundation/components/joyride";
@import "foundation/components/clearing";
@import "foundation/components/alert-boxes";
@import "foundation/components/breadcrumbs";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/side-nav";
@import "foundation/components/sub-nav";
@import "foundation/components/switch";
@import "foundation/components/magellan";
// @import "foundation/components/tables"; // prevent Table CSS from loading
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/dropdown";
Another option, if you know how you would like to change the padding, borders, etc. to match your other included elements is you could edit the _settings.scss
, lines 1064 - 1097 where it has variables for tables. I am showing the variables here unmodified to illustrate what can be changed.
//
// Table Variables
//
//// Background color for the table and even rows
// $table-bg: #fff;
// $table-even-row-bg: #f9f9f9;
//// Table cell border style
// $table-border-style: solid;
// $table-border-size: 1px;
// $table-border-color: #ddd;
//// Table head styles
// $table-head-bg: #f5f5f5;
// $table-head-font-size: emCalc(14px);
// $table-head-font-color: #222;
// $table-head-font-weight: bold;
// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
//// Row padding and font styles
// $table-row-padding: emCalc(9px) emCalc(10px);
// $table-row-font-size: emCalc(14px);
// $table-row-font-color: #222;
// $table-line-height: emCalc(18px);
//// Display and margin of tables
// $table-display: table-cell;
// $table-margin-bottom: emCalc(20px);
If you have time and want to go even further, you can pull the foundation/components/tables.scss file into your local project, modify it however you like and link to the modified version as above. You can find the original files by running gem which zurb-foundation
I have installed with rvm
so I get something like ~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb
from the zurb-foundation-4.1.5
directory the file is located in scss/foundation/components
and called _tables.scss